Migrate Primary action icons

src/components/Envelope.vue

@@ -59,26 +59,43 @@
 		</template>
 		<template #actions>
 			<EnvelopePrimaryActions v-if="!moreActionsOpen">
-				<ActionButton icon="icon-starred"
+				<ActionButton
 					class="action--primary"
 					:close-after-click="true"
 					@click.prevent="onToggleFlagged">
+					<template #icon>
+						<StarOutline v-if="showFavoriteIconVariant"
+							:size="20" />
+						<Star v-else
+							:size="20"
+							fill-color="#f9cf3d" />
+					</template>
 					{{
 						data.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite')
 					}}
 				</ActionButton>
-				<ActionButton icon="icon-mail"
+				<ActionButton
 					class="action--primary"
 					:close-after-click="true"
 					@click.prevent="onToggleSeen">
+					<template #icon>
+						<Email v-if="showImportantIconVariant"
+							:size="20" />
+						<EmailOutline v-else
+							:size="20" />
+					</template>
 					{{
 						data.flags.seen ? t('mail', 'Unread') : t('mail', 'Read')
 					}}
 				</ActionButton>
-				<ActionButton icon="icon-important"
+				<ActionButton
 					class="action--primary"
 					:close-after-click="true"
 					@click.prevent="onToggleImportant">
+					<template #icon>
+						<ImportantIcon
+							:size="20" />
+					</template>
 					{{
 						isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
 					}}
@@ -226,6 +243,11 @@ import logger from '../logger'
 import { matchError } from '../errors/match'
 import MoveModal from './MoveModal'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew'
+import StarOutline from 'vue-material-design-icons/StarOutline'
+import Star from 'vue-material-design-icons/Star'
+import EmailOutline from 'vue-material-design-icons/EmailOutline'
+import Email from 'vue-material-design-icons/Email'
+import ImportantIcon from './icons/ImportantIcon'
 import PlusIcon from 'vue-material-design-icons/Plus'
 import TagIcon from 'vue-material-design-icons/Tag'
 import TagModal from './TagModal'
@@ -251,6 +273,11 @@ export default {
 		PlusIcon,
 		TagIcon,
 		TagModal,
+		Star,
+		StarOutline,
+		EmailOutline,
+		Email,
+		ImportantIcon,
 	},
 	directives: {
 		draggableEnvelope: DraggableEnvelopeDirective,
@@ -363,6 +390,12 @@ export default {
 				return ''
 			}
 		},
+		showFavoriteIconVariant() {
+			return this.data.flags.flagged
+		},
+		showImportantIconVariant() {
+			return this.data.flags.seen
+		},
 		isImportant() {
 			return this.$store.getters
 				.getEnvelopeTags(this.data.databaseId)

src/components/EnvelopePrimaryActions.vue

@@ -32,6 +32,7 @@ export default {
 
 .list-item-content__actions--primary .action--primary .action-button__text {
 	font-size: 14px;
+	margin-top: -8px;
 }
 
 .list-item-content__actions--primary .action--primary .action-button__text,

src/components/MenuEnvelope.vue

@@ -7,26 +7,43 @@
 			@click.native.prevent>
 			<template v-if="!moreActionsOpen">
 				<EnvelopePrimaryActions>
-					<ActionButton :icon="iconFavorite"
+					<ActionButton
 						class="action--primary"
 						:close-after-click="true"
 						@click.prevent="onToggleFlagged">
+						<template #icon>
+							<StarOutline v-if="showFavoriteIconVariant"
+								:size="20" />
+							<Star v-else
+								:size="20"
+								fill-color="#f9cf3d" />
+						</template>
 						{{
 							envelope.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite')
 						}}
 					</ActionButton>
-					<ActionButton icon="icon-mail"
+					<ActionButton
 						class="action--primary"
 						:close-after-click="true"
 						@click.prevent="onToggleSeen">
+						<template #icon>
+							<Email v-if="showImportantIconVariant"
+								:size="20" />
+							<EmailOutline v-else
+								:size="20" />
+						</template>
 						{{
 							envelope.flags.seen ? t('mail', 'Unread') : t('mail', 'Read')
 						}}
 					</ActionButton>
-					<ActionButton icon="icon-important"
+					<ActionButton
 						class="action--primary"
 						:close-after-click="true"
 						@click.prevent="onToggleImportant">
+						<template #icon>
+							<ImportantIcon
+								:size="20" />
+						</template>
 						{{
 							isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
 						}}
@@ -222,10 +239,13 @@ import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
 import DeleteIcon from 'vue-material-design-icons/Delete'
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal'
 import DownloadIcon from 'vue-material-design-icons/Download'
+import EmailOutline from 'vue-material-design-icons/EmailOutline'
+import Email from 'vue-material-design-icons/Email'
 import EventModal from './EventModal'
 import EnvelopePrimaryActions from './EnvelopePrimaryActions'
 import { generateUrl } from '@nextcloud/router'
 import InformationIcon from 'vue-material-design-icons/Information'
+import ImportantIcon from './icons/ImportantIcon'
 import logger from '../logger'
 import { matchError } from '../errors/match'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
@@ -235,6 +255,9 @@ import PlusIcon from 'vue-material-design-icons/Plus'
 import ReplyIcon from 'vue-material-design-icons/Reply'
 import ReplyAllIcon from 'vue-material-design-icons/ReplyAll'
 import ShareIcon from 'vue-material-design-icons/Share'
+import Star from 'vue-material-design-icons/Star'
+import StarOutline from 'vue-material-design-icons/StarOutline'
+
 import TagIcon from 'vue-material-design-icons/Tag'
 import TagModal from './TagModal'
 import NoTrashMailboxConfiguredError from '../errors/NoTrashMailboxConfiguredError'
@@ -265,6 +288,11 @@ export default {
 		ShareIcon,
 		TagIcon,
 		TagModal,
+		Star,
+		StarOutline,
+		Email,
+		EmailOutline,
+		ImportantIcon,
 	},
 	props: {
 		envelope: {
@@ -341,8 +369,11 @@ export default {
 		threadingFileName() {
 			return `${this.envelope.databaseId}.json`
 		},
-		iconFavorite() {
-			return this.envelope.flags.flagged ? 'icon-favorite' : 'icon-starred'
+		showFavoriteIconVariant() {
+			return this.envelope.flags.flagged
+		},
+		showImportantIconVariant() {
+			return this.envelope.flags.seen
 		},
 		isImportant() {
 			return this.$store.getters

src/components/icons/ImportantIcon.vue

@@ -0,0 +1,38 @@
+<template functional>
+	<span :aria-hidden="!props.title"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon important-icon"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 16 16">
+			<path d="M0 0h24v24H0V0z" fill="none" />
+			<path d="M2 13h7.8a1.4 1.4 0 001.1-.6L14 8l-3.1-4.4A1.4 1.4 0 009.8 3H2l3.4 5z" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'ImportantIcon',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+	},
+}
+</script>