Migrate icons to material design

src/components/Dashboard.vue

@@ -42,7 +42,10 @@
 			</DashboardWidgetItem>
 		</template>
 		<template #empty-content>
-			<EmptyContent id="mail--empty-content" icon="icon-checkmark">
+			<EmptyContent id="mail--empty-content">
+				<template #icon>
+					<IconCheck :size="65" />
+				</template>
 				<template #desc>
 					{{ t('mail', 'No message found yet') }}
 					<div class="no-account">
@@ -61,6 +64,7 @@ import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
 import orderBy from 'lodash/fp/orderBy'
 import prop from 'lodash/fp/prop'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import IconCheck from 'vue-material-design-icons/Check'
 
 import Avatar from '../components/Avatar'
 import { fetchEnvelopes } from '../service/MessageService'
@@ -77,6 +81,7 @@ export default {
 		DashboardWidget,
 		DashboardWidgetItem,
 		EmptyContent,
+		IconCheck,
 	},
 	props: {
 		query: {

src/components/EmptyMailbox.vue

@@ -1,12 +1,16 @@
 <template>
 	<div id="emptycontent">
-		<div class="icon-mail" />
+		<IconMail :size="65" />
 		<h2>{{ t('mail', 'No messages in this mailbox') }}</h2>
 	</div>
 </template>
 
 <script>
+import IconMail from 'vue-material-design-icons/Email'
 export default {
 	name: 'EmptyMailbox',
+	components: {
+		IconMail,
+	},
 }
 </script>

src/components/NavigationAccount.vue

@@ -24,12 +24,14 @@
 		v-if="visible"
 		:id="id"
 		:key="id"
-		:icon="iconError"
 		:menu-open.sync="menuOpen"
 		:title="account.emailAddress"
 		:to="firstMailboxRoute"
 		:exact="true"
 		@update:menuOpen="onMenuToggle">
+		<template #icon>
+			<IconError v-if="account.error" :size="20" />
+		</template>
 		<!-- Color dot -->
 		<AppNavigationIconBullet v-if="bulletColor" slot="icon" :color="bulletColor" />
 
@@ -122,6 +124,7 @@ import IconFolderAdd from 'vue-material-design-icons/Folder'
 import MenuDown from 'vue-material-design-icons/MenuDown'
 import MenuUp from 'vue-material-design-icons/MenuUp'
 import IconDelete from 'vue-material-design-icons/Delete'
+import IconError from 'vue-material-design-icons/AlertCircle'
 
 export default {
 	name: 'NavigationAccount',
@@ -139,6 +142,7 @@ export default {
 		MenuDown,
 		MenuUp,
 		IconDelete,
+		IconError,
 	},
 	props: {
 		account: {
@@ -194,7 +198,7 @@ export default {
 			return this.account.error ? undefined : calculateAccountColor(this.account.emailAddress)
 		},
 		iconError() {
-			return this.account.error ? 'icon-error' : undefined
+			return this.account.error
 		},
 		quotaText() {
 			if (this.quota === undefined) {

src/components/NoMessageSelected.vue

@@ -22,7 +22,7 @@
 <template>
 	<AppContentDetails>
 		<div id="emptycontent">
-			<div class="icon icon-mail" />
+			<IconMail :size="65" />
 			<h2>{{ t('mail', 'No message selected') }}</h2>
 			<p />
 		</div>
@@ -31,24 +31,18 @@
 
 <script>
 import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
+import IconMail from 'vue-material-design-icons/Email'
 
 export default {
 	name: 'NoMessageSelected',
 	components: {
 		AppContentDetails,
+		IconMail,
 	},
 }
 </script>
 
 <style scoped>
-.icon {
-	height: 64px;
-	width: 64px;
-	margin: 0 auto 15px;
-	background-size: 64px;
-	opacity: 0.4;
-}
-
 h2,
 p {
 	text-align: center;

src/components/OutboxMessageContent.vue

@@ -1,15 +1,18 @@
 <template>
 	<div id="emptycontent">
-		<div class="icon-mail" />
+		<IconMail :size="65" />
 		<h2>{{ t('mail', 'Pending or not sent messages will show up here') }}</h2>
 		<div />
 	</div>
 </template>
 
 <script>
+import IconMail from 'vue-material-design-icons/Email'
+
 export default {
 	name: 'OutboxMessageContent',
 	components: {
+		IconMail,
 	},
 }
 </script>

src/views/Setup.vue

@@ -2,7 +2,10 @@
 	<Content app-name="mail">
 		<Navigation v-if="hasAccounts" />
 		<div class="mail-empty-content">
-			<EmptyContent icon="icon-mail">
+			<EmptyContent>
+				<template #icon>
+					<IconMail :size="65" />
+				</template>
 				<h2>{{ t('mail', 'Connect your mail account') }}</h2>
 				<template #desc>
 					<AccountForm :display-name="displayName"
@@ -21,6 +24,7 @@ import { loadState } from '@nextcloud/initial-state'
 
 import AccountForm from '../components/AccountForm'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import IconMail from 'vue-material-design-icons/Email'
 import Navigation from '../components/Navigation'
 import logger from '../logger'
 
@@ -30,6 +34,7 @@ export default {
 		AccountForm,
 		Content,
 		EmptyContent,
+		IconMail,
 		Navigation,
 	},
 	data() {