use md icons (the rest)

Signed-off-by: dartcafe <github@dartcafe.de>

11 files changed, 203 insertions, 169 deletions

diff --git a/src/js/components/Base/Badge.vue b/src/js/components/Base/Badge.vue
index c35e66b7..bc42f059 100644
--- a/src/js/components/Base/Badge.vue
+++ b/src/js/components/Base/Badge.vue
@@ -21,8 +21,14 @@
   -->
 
 <template lang="html">
-	<Component :is="tag" :class="badgeClass">
-		{{ title }}
+	<Component :is="tag" class="badge">
+		<div :class="icon" />
+		<span>
+			{{ title }}
+		</span>
+		<span>
+			<slot />
+		</span>
 	</Component>
 </template>
 
@@ -43,17 +49,13 @@ export default {
 			default: 'span',
 		},
 	},
-
-	computed: {
-		badgeClass() {
-			return ['badge', this.icon, { withIcon: Boolean(this.icon) }]
-		},
-	},
 }
 </script>
 
 <style lang="scss">
 	.badge {
+		display: flex;
+		gap: 5px;
 		border-radius: var(--border-radius);
 		padding: 5px;
 		margin: 8px 4px;
@@ -67,22 +69,22 @@ export default {
 			font-size: 0.6em;
 		}
 
-		&.withIcon {
-			padding-left: 25px !important;
-			text-align: left;
-			background-position: 4px center;
-		}
-
 		&.error {
 			border-color: var(--color-error);
 			background-color: var(--color-error);
-			color: var(--color-primary-text);
+			color: var(--color-primary-text) !important;
+			[class*='icon-md-'] {
+				background-color: #fff;
+			}
 		}
 
 		&.success {
 			border-color: var(--color-success);
 			background-color: var(--color-success);
-			color: var(--color-primary-text);
+			color: var(--color-primary-text) !important;
+			[class*='icon-md-'] {
+				background-color: #fff;
+			}
 		}
 	}
 
diff --git a/src/js/components/Export/ExportPoll.vue b/src/js/components/Export/ExportPoll.vue
index e8ab8cb2..f9fb6786 100644
--- a/src/js/components/Export/ExportPoll.vue
+++ b/src/js/components/Export/ExportPoll.vue
@@ -21,7 +21,10 @@
   -->

 

 <template lang="html">

-	<Actions default-icon="icon-download">

+	<Actions default-icon="icon-md-export">

+		<template #icon>

+			<ExportIcon />

+		</template>

 		<ActionButton close-after-click @click="exportFile('xlsx')">

 			<template #icon>

 				<ExcelIcon />

@@ -61,6 +64,7 @@ import ExcelIcon from 'vue-material-design-icons/MicrosoftExcel.vue'
 import FileTableIcon from 'vue-material-design-icons/FileTableOutline.vue'

 import CsvIcon from 'vue-material-design-icons/FileDelimited.vue'

 import XmlIcon from 'vue-material-design-icons/Xml.vue'

+import ExportIcon from 'vue-material-design-icons/FileDownloadOutline'

 

 export default {

 	name: 'ExportPoll',

@@ -70,6 +74,7 @@ export default {
 		CsvIcon,

 		ExcelIcon,

 		FileTableIcon,

+		ExportIcon,

 		XmlIcon,

 	},

 

diff --git a/src/js/components/Navigation/PollNavigationItems.vue b/src/js/components/Navigation/PollNavigationItems.vue
index e799db09..d2aff7dc 100644
--- a/src/js/components/Navigation/PollNavigationItems.vue
+++ b/src/js/components/Navigation/PollNavigationItems.vue
@@ -22,28 +22,30 @@
 
 <template lang="html">
 	<AppNavigationItem :title="poll.title"
-		:icon="pollIcon"
+		:icon="pollTypeIcon"
 		:to="{name: 'vote', params: {id: poll.id}}"
 		:class="{ closed: closed }">
 		<template #actions>
-			<ActionButton v-if="isPollCreationAllowed" icon="icon-polls-clone" @click="$emit('clone-poll')">
+			<ActionButton v-if="isPollCreationAllowed"
+				icon="icon-md-clone-poll"
+				@click="$emit('clone-poll')">
 				{{ t('polls', 'Clone poll') }}
 			</ActionButton>
 
 			<ActionButton v-if="poll.allowEdit && !poll.deleted"
-				icon="icon-category-app-bundles"
+				icon="icon-md-archive-poll"
 				@click="$emit('toggle-archive')">
 				{{ t('polls', 'Archive poll') }}
 			</ActionButton>
 
 			<ActionButton v-if="poll.allowEdit && poll.deleted"
-				icon="icon-history"
+				icon="icon-md-restore-poll"
 				@click="$emit('toggle-archive')">
 				{{ t('polls', 'Restore poll') }}
 			</ActionButton>
 
 			<ActionButton v-if="poll.allowEdit && poll.deleted"
-				icon="icon-delete"
+				icon="icon-md-delete-poll"
 				class="danger"
 				@click="$emit('delete-poll')">
 				{{ t('polls', 'Delete poll') }}
@@ -81,19 +83,13 @@ export default {
 			closed: 'poll/isClosed',
 		}),
 
-		pollIcon() {
-			if (this.poll.type === 'datePoll') {
-				return 'icon-calendar-000'
+		pollTypeIcon() {
+			if (this.poll.type === 'textPoll') {
+				return 'icon-md-text-poll'
 			}
-			return 'icon-toggle-filelist'
 
+			return 'icon-md-date-poll'
 		},
 	},
 }
 </script>
-
-<style lang="scss">
-.icon-calendar-000 {
-	background-image: var(--icon-calendar-000);
-}
-</style>
diff --git a/src/js/components/Poll/PollHeaderButtons.vue b/src/js/components/Poll/PollHeaderButtons.vue
index e65e7736..2a7ae8fb 100644
--- a/src/js/components/Poll/PollHeaderButtons.vue
+++ b/src/js/components/Poll/PollHeaderButtons.vue
@@ -26,7 +26,10 @@
 		<Popover>
 			<template #trigger>
 				<Actions>
-					<ActionButton icon="icon-info">
+					<ActionButton icon="icon-md-poll-information">
+						<template #icon>
+							<PollInformationIcon />
+						</template>
 						{{ t('polls', 'Poll informations') }}
 					</ActionButton>
 				</Actions>
@@ -44,10 +47,12 @@ import { Actions, ActionButton, Popover } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
 import ActionToggleSidebar from '../Actions/ActionToggleSidebar'
 import UserMenu from '../User/UserMenu'
+import PollInformationIcon from 'vue-material-design-icons/InformationOutline.vue'
 
 export default {
 	name: 'PollHeaderButtons',
 	components: {
+		PollInformationIcon,
 		Actions,
 		ActionButton,
 		Popover,
diff --git a/src/js/components/Poll/PollInfoLine.vue b/src/js/components/Poll/PollInfoLine.vue
index 219a536c..3635bf4e 100644
--- a/src/js/components/Poll/PollInfoLine.vue
+++ b/src/js/components/Poll/PollInfoLine.vue
@@ -22,9 +22,9 @@
 
 <template lang="html">
 	<div class="poll-info-line">
-		<span>{{ subTextLeft }}</span>
-		<span v-for="(subText) in subTexts" :key="subText.text">
-			<span :class="[subText.class, subText.icon]">{{ subText.text }}</span>
+		<span v-for="(subText) in subTexts" :key="subText.id" :class="subText.class">
+			<span :class="subText.icon" />
+			<span class="sub-text">{{ subText.text }}</span>
 		</span>
 	</div>
 </template>
@@ -55,13 +55,6 @@ export default {
 			proposalsExpireRelative: 'poll/proposalsExpireRelative',
 		}),
 
-		subTextLeft() {
-			if (this.access === 'private') {
-				return t('polls', 'A hidden poll from {name}', { name: this.ownerDisplayName })
-			}
-			return t('polls', 'A public poll from {name}', { name: this.ownerDisplayName })
-		},
-
 		isNoAccessSet() {
 			return this.access === 'private' && !this.hasShares && this.mayEdit
 		},
@@ -69,59 +62,88 @@ export default {
 		subTexts() {
 			const subTexts = []
 
+			if (this.access === 'private') {
+				subTexts.push({
+					id: this.access,
+					text: t('polls', 'A hidden poll from {name}', { name: this.ownerDisplayName }),
+					icon: '',
+					class: '',
+				})
+			} else {
+				subTexts.push({
+					id: this.access,
+					text: t('polls', 'A public poll from {name}', { name: this.ownerDisplayName }),
+					icon: '',
+					class: '',
+				})
+			}
+
 			if (this.isNoAccessSet) {
-				return [{
+				subTexts.push({
+					id: 'no-access',
 					text: t('polls', 'Invite users via the share tab in the sidebar'),
-					icon: 'icon-error',
+					icon: 'icon-md-sidebar-share',
 					class: 'closed',
-				}]
+				})
+				return subTexts
 			}
 			if (this.isDeleted) {
-				return [{
+				subTexts.push({
+					id: 'deleted',
 					text: t('polls', 'Archived'),
-					icon: 'icon-category-app-bundles',
+					icon: 'icon-md-archived-poll',
 					class: 'archived',
-				}]
+				})
+				return subTexts
 			}
 
 			if (this.isClosed) {
-				return [{
+				subTexts.push({
+					id: 'closed',
 					text: this.timeExpirationRelative,
 					icon: 'icon-polls-closed',
 					class: 'closed',
-				}]
+				})
+				return subTexts
 			}
 
 			if (!this.isClosed && this.expire) {
 				subTexts.push({
+					id: 'expiring',
 					text: t('polls', 'Closing {relativeExpirationTime}', { relativeExpirationTime: this.timeExpirationRelative }),
-					icon: 'icon-calendar-000',
+					icon: 'icon-md-expiration',
 					class: this.closeToClosing ? 'closing' : 'open',
 				})
+				return subTexts
 			}
 
 			if (this.proposalsExpirySet && this.proposalsExpired) {
 				subTexts.push({
+					id: 'expired',
 					text: t('polls', 'Proposal period ended {timeRelative}', { timeRelative: this.proposalsExpireRelative }),
-					icon: 'icon-add',
+					icon: 'icon-md-proposals',
 					class: 'proposal',
 				})
+				return subTexts
 			}
 
 			if (this.proposalsExpirySet && !this.proposalsExpired) {
 				subTexts.push({
+					id: 'proposal-open',
 					text: t('polls', 'Proposal period ends {timeRelative}', { timeRelative: this.proposalsExpireRelative }),
-					icon: 'icon-add',
+					icon: 'icon-md-proposals',
 					class: 'proposal',
 				})
+				return subTexts
 			}
 
-			if (subTexts.length < 1) {
-				return [{
+			if (subTexts.length < 2) {
+				subTexts.push({
+					id: 'created',
 					text: this.dateCreatedRelative,
-					icon: 'icon-clock',
+					icon: 'icon-md-creation',
 					class: 'created',
-				}]
+				})
 			}
 			return subTexts
 		},
@@ -153,42 +175,52 @@ export default {
 	opacity: 0.7;
 	font-size: 1em;
 
-	button {
-		margin-left: 8px;
-	}
-
 	& > span:not(:last-child)::after {
 		content: "|";
-		padding: 0 4px;
+		padding: 0 2px;
 	}
 
 	[class^="icon-"],
 	[class*=" icon-"] {
-		padding-left: 21px;
-		background-position: left center;
+		padding-right: 21px;
+	}
+
+	[class^="icon-md"],
+	[class*=" icon-md"] {
+		mask-size: 1em;
 	}
 
 	.closed {
-		color: var(--color-error);
-		font-weight: 700;
+		.sub-text{
+			color: var(--color-error);
+			font-weight: 700;
+		}
 	}
 
 	.closing {
-		color: var(--color-warning);
-		font-weight: 700;
+		.sub-text{
+			color: var(--color-warning);
+			font-weight: 700;
+		}
 	}
 
 	.open {
-		font-weight: 700;
+		.sub-text{
+			font-weight: 700;
+		}
 	}
 
 	.archived {
-		color: var(--color-error);
-		font-weight: 700;
+		.sub-text{
+			color: var(--color-error);
+			font-weight: 700;
+		}
 	}
 
 	.created {
-		color: var(--color-text-light);
+		.sub-text{
+			color: var(--color-text-light);
+		}
 	}
 }
 </style>
diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue
index 7d3a13df..5d48a71e 100644
--- a/src/js/components/Poll/PollInformation.vue
+++ b/src/js/components/Poll/PollInformation.vue
@@ -22,45 +22,34 @@
 
 <template lang="html">
 	<div class="poll-information">
-		<div class="icon-user">
+		<Badge icon="icon-md-owner">
 			{{ t('polls', 'Poll owner:') }} <UserBubble v-if="poll.owner.userId" :user="poll.owner.userId" :display-name="poll.owner.displayName" />
-		</div>
-		<div :class="accessClass">
-			{{ accessCaption }}
-		</div>
-		<div class="icon-star">
-			{{ t('polls', 'Created {dateRelative}', { dateRelative: dateCreatedRelative }) }}
-		</div>
-		<div v-if="poll.expire" class="icon-polls-closed">
-			{{ t('polls', 'Closing: {dateRelative}', {dateRelative: dateExpiryRelative}) }}
-		</div>
-		<div v-if="poll.anonymous" class="icon-polls-anonymous">
-			{{ t('polls', 'Anonymous poll') }}
-		</div>
-		<div :class="resultsClass">
-			{{ resultsCaption }}
-		</div>
-		<div v-if="countParticipantsVoted && acl.allowSeeResults" class="icon-user">
-			{{ n('polls', '%n Participant', '%n Participants', countParticipantsVoted) }}
-		</div>
-		<div class="icon-polls-unconfirmed">
-			{{ n('polls', '%n option', '%n options', countOptions) }}
-		</div>
-		<div v-if="countAllYesVotes" class="icon-polls-yes">
+		</Badge>
+		<Badge :icon="accessClass" :title="accessCaption" />
+		<Badge icon="icon-md-creation"
+			:title="t('polls', 'Created {dateRelative}', { dateRelative: dateCreatedRelative })" />
+		<Badge v-if="poll.expire"
+			icon="icon-md-closed-poll"
+			:title="t('polls', 'Closing: {dateRelative}', {dateRelative: dateExpiryRelative})" />
+		<Badge v-if="poll.anonymous"
+			icon="icon-md-anonymous-poll"
+			:title="t('polls', 'Anonymous poll')" />
+		<Badge :icon="resultsClass" :title="resultsCaption" />
+		<Badge v-if="countParticipantsVoted && acl.allowSeeResults"
+			icon="icon-md-participants"
+			:title="n('polls', '%n Participant', '%n Participants', countParticipantsVoted)" />
+		<Badge icon="icon-md-options" :title="n('polls', '%n option', '%n options', countOptions)" />
+		<Badge v-if="countAllYesVotes" icon="icon-md-yes-votes">
 			{{ n('polls', '%n "Yes" vote', '%n "Yes" votes', countAllYesVotes) }}
-		</div>
-		<div v-if="countAllNoVotes" class="icon-polls-no">
-			{{ n('polls', '%n "No" vote', '%n "No" votes', countAllNoVotes) }}
-		</div>
-		<div v-if="countAllMaybeVotes" class="icon-polls-maybe">
+		</Badge>
+		<Badge v-if="countAllNoVotes" icon="icon-md-no-votes">
+			{{ n('polls', '%n No vote', '%n "No" votes', countAllNoVotes) }}
+		</Badge>
+		<Badge v-if="countAllMaybeVotes" icon="icon-md-maybe-votes">
 			{{ n('polls', '%n "Maybe" vote', '%n "Maybe" votes', countAllMaybeVotes) }}
-		</div>
-		<div class="icon-timezone">
-			{{ t('polls', 'Time zone: {timezoneString}', { timezoneString: currentTimeZone}) }}
-		</div>
-		<div v-if="proposalsAllowed" class="icon-add">
-			{{ proposalsStatus }}
-		</div>
+		</Badge>
+		<Badge icon="icon-md-timezone" :title="t('polls', 'Time zone: {timezoneString}', { timezoneString: currentTimeZone})" />
+		<Badge v-if="proposalsAllowed" icon="icon-md-proposals-allowed" :title="proposalsStatus" />
 		<div v-if="poll.voteLimit" class="icon-checkmark">
 			{{ n('polls', '%n of {maximalVotes} vote left.', '%n of {maximalVotes} votes left.', poll.voteLimit - countVotes('yes'), { maximalVotes: poll.voteLimit }) }}
 		</div>
@@ -70,9 +59,9 @@
 		<div v-if="$route.name === 'publicVote' && share.emailAddress" class="icon-mail">
 			{{ share.emailAddress }}
 		</div>
-		<div v-if="subscribed" class="icon-sound">
-			{{ t('polls', 'You subscribed to this poll') }}
-		</div>
+		<Badge v-if="subscribed"
+			icon="icon-md-subscribed"
+			:title="t('polls', 'You subscribed to this poll')" />
 	</div>
 </template>
 
@@ -80,11 +69,13 @@
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
 import { UserBubble } from '@nextcloud/vue'
+import Badge from '../Base/Badge'
 
 export default {
 	name: 'PollInformation',
 
 	components: {
+		Badge,
 		UserBubble,
 	},
 
@@ -138,35 +129,37 @@ export default {
 				return t('polls', 'Results are always hidden')
 			}
 			return t('polls', 'Results are visible')
+		},
+
+		resultsClass() {
+			if (this.showResults === 'never') {
+				return 'icon-md-show-results-never'
+			}
+			if (this.showResults === 'closed' && !this.closed) {
+				return 'icon-md-hide-results-until-closed'
+			}
+			return 'icon-md-show-results'
 
 		},
 
 		accessCaption() {
 			if (this.access === 'private') {
-				return t('polls', 'Access only for invited persons')
+				return t('polls', 'Private poll')
 			}
 			if (this.important) {
-				return t('polls', 'Relevant and accessible for all users')
+				return t('polls', 'Open and relevant poll')
 			}
 			return t('polls', 'Open poll')
 		},
 
 		accessClass() {
 			if (this.access === 'private') {
-				return 'icon-polls-private-poll'
+				return 'icon-md-private-poll'
 			}
 			if (this.important) {
-				return 'icon-polls-open-poll'
-			}
-			return 'icon-polls-open-poll'
-		},
-
-		resultsClass() {
-			if (this.showResults === 'never' || (this.showResults === 'closed' && !this.closed)) {
-				return 'icon-polls-private'
+				return 'icon-md-open-poll'
 			}
-			return 'icon-polls-visible'
-
+			return 'icon-md-open-poll'
 		},
 
 		dateCreatedRelative() {
diff --git a/src/js/components/PollList/PollItem.vue b/src/js/components/PollList/PollItem.vue
index a352e27d..d3e1d4e4 100644
--- a/src/js/components/PollList/PollItem.vue
+++ b/src/js/components/PollList/PollItem.vue
@@ -53,7 +53,7 @@
 	</div>
 
 	<div v-else class="poll-item__item">
-		<div v-tooltip.auto="pollType" :class="'item__type--' + poll.type" />
+		<div v-tooltip.auto="pollTypeName" :class="['item__icon-spacer', pollTypeIcon]" />
 
 		<div v-if="noLink" class="item__title" :class="{ closed: closed }">
 			<div class="item__title__title">
@@ -89,11 +89,11 @@
 		<div class="wrapper">
 			<div class="item__created">
 				<Badge :title="timeCreatedRelative"
-					icon="icon-clock" />
+					icon="icon-md-creation" />
 			</div>
 			<div class="item__expiry">
 				<Badge :title="timeExpirationRelative"
-					icon="icon-calendar-000"
+					icon="icon-md-expiration"
 					:class="expiryClass" />
 			</div>
 		</div>
@@ -152,24 +152,32 @@ export default {
 			return t('polls', 'Private poll')
 		},
 
-		accessIcon() {
-			if (this.poll.deleted) {
-				return 'icon-category-app-bundles'
+		pollTypeName() {
+			if (this.poll.type === 'textPoll') {
+				return t('polls', 'Text poll')
 			}
 
-			if (this.poll.access === 'open') {
-				return 'icon-polls-open-poll'
+			return t('polls', 'Date poll')
+		},
+
+		pollTypeIcon() {
+			if (this.poll.type === 'textPoll') {
+				return 'icon-md-text-poll'
 			}
 
-			return 'icon-polls-private-poll'
+			return 'icon-md-date-poll'
 		},
 
-		pollType() {
-			if (this.poll.type === 'textPoll') {
-				return t('polls', 'Text poll')
+		accessIcon() {
+			if (this.poll.deleted) {
+				return 'icon-md-archived-poll'
 			}
 
-			return t('polls', 'Date poll')
+			if (this.poll.access === 'open') {
+				return 'icon-md-open-poll'
+			}
+
+			return 'icon-md-private-poll'
 		},
 
 		timeExpirationRelative() {
@@ -306,14 +314,6 @@ export default {
 		min-height: 16px;
 	}
 
-	.item__type--textPoll {
-		background-image: var(--icon-toggle-filelist-000);
-	}
-
-	.item__type--datePoll {
-		background-image: var(--icon-calendar-000);
-	}
-
 	[class^='item__access'] {
 		width: 70px;
 		background-repeat: no-repeat;
@@ -322,16 +322,4 @@ export default {
 		min-height: 16px;
 		justify-content: center;
 	}
-
-	.item__access--public {
-		background-image: var(--icon-polls-open-poll);
-	}
-
-	.item__access--hidden {
-		background-image: var(--icon-polls-private-poll);
-	}
-
-	.item__access--deleted {
-		background-image: var(--icon-category-app-bundles-000);
-	}
 </style>
diff --git a/src/js/components/PollList/PollItemAdmin.vue b/src/js/components/PollList/PollItemAdmin.vue
index 2ccbb8c9..9f8dc0c4 100644
--- a/src/js/components/PollList/PollItemAdmin.vue
+++ b/src/js/components/PollList/PollItemAdmin.vue
@@ -53,7 +53,8 @@
 	</div>
 
 	<div v-else class="poll-item__item" :class="{ closed: closed, active: (poll.id === $store.state.poll.id) }">
-		<div v-tooltip.auto="pollType" :class="'item__type--' + poll.type" />
+		<div v-tooltip.auto="pollTypeName" :class="pollTypeIcon" />
+
 		<div class="item__title">
 			<div class="item__title__title">
 				{{ poll.title }}
@@ -62,11 +63,15 @@
 				{{ poll.description ? poll.description : t('polls', 'No description provided') }}
 			</div>
 		</div>
+
 		<slot name="actions" />
+
 		<div v-tooltip.auto="accessType" :class="'item__access--' + poll.access" />
+
 		<div class="item__owner">
 			<UserItem v-bind="poll.owner" />
 		</div>
+
 		<div class="wrapper">
 			<div class="item__created">
 				{{ timeCreatedRelative }}
@@ -117,12 +122,20 @@ export default {
 
 		},
 
-		pollType() {
+		pollTypeName() {
 			if (this.poll.type === 'textPoll') {
 				return t('polls', 'Text poll')
 			}
+
 			return t('polls', 'Date poll')
+		},
+
+		pollTypeIcon() {
+			if (this.poll.type === 'textPoll') {
+				return 'icon-md-text-poll'
+			}
 
+			return 'icon-md-date-poll'
 		},
 
 		timeExpirationRelative() {
diff --git a/src/js/components/SideBar/SideBarTabComments.vue b/src/js/components/SideBar/SideBarTabComments.vue
index b3dedf04..1ef36a17 100644
--- a/src/js/components/SideBar/SideBarTabComments.vue
+++ b/src/js/components/SideBar/SideBarTabComments.vue
@@ -24,7 +24,7 @@
 	<div class="comments">
 		<CommentAdd v-if="acl.allowComment" />
 		<Comments v-if="!showEmptyContent" />
-		<EmptyContent v-else icon="icon-comment">
+		<EmptyContent v-else icon="icon-md-sidebar-comments">
 			{{ t('polls', 'No comments') }}
 			<template #desc>
 				{{ t('polls', 'Be the first.') }}
diff --git a/src/js/components/SideBar/SideBarTabConfiguration.vue b/src/js/components/SideBar/SideBarTabConfiguration.vue
index 5d8b3989..cb81fdb8 100644
--- a/src/js/components/SideBar/SideBarTabConfiguration.vue
+++ b/src/js/components/SideBar/SideBarTabConfiguration.vue
@@ -68,7 +68,7 @@
 		<ConfigBox :title="t('polls', 'Result display')">
 			<template #icon>
 				<ShowResultsIcon v-if="showResults === 'always'" />
-				<HieResultsUntilClosedIcon v-if="showResults === 'closed'" />
+				<HideResultsUntilClosedIcon v-if="showResults === 'closed'" />
 				<ShowResultsNeverIcon v-if="showResults === 'never'" />
 			</template>
 			<ConfigShowResults @change="writePoll" />
@@ -109,7 +109,7 @@ import PollConfigIcon from 'vue-material-design-icons/Wrench.vue'
 import LockedIcon from 'vue-material-design-icons/Lock.vue'
 import UnlockedIcon from 'vue-material-design-icons/LockOpenVariant.vue'
 import ShowResultsIcon from 'vue-material-design-icons/Monitor.vue'
-import HieResultsUntilClosedIcon from 'vue-material-design-icons/MonitorLock.vue'
+import HideResultsUntilClosedIcon from 'vue-material-design-icons/MonitorLock.vue'
 import ShowResultsNeverIcon from 'vue-material-design-icons/MonitorOff.vue'
 
 export default {
@@ -118,7 +118,7 @@ export default {
 	components: {
 		DescriptionIcon,
 		ShowResultsIcon,
-		HieResultsUntilClosedIcon,
+		HideResultsUntilClosedIcon,
 		ShowResultsNeverIcon,
 		LockedIcon,
 		UnlockedIcon,
diff --git a/src/js/components/User/UserMenu.vue b/src/js/components/User/UserMenu.vue
index 320bce50..c79e5394 100644
--- a/src/js/components/User/UserMenu.vue
+++ b/src/js/components/User/UserMenu.vue
@@ -27,7 +27,7 @@
 		</ActionButton>
 		<ActionSeparator />
 		<ActionInput v-if="$route.name === 'publicVote'"
-			icon="icon-edit"
+			icon="icon-md-edit-email-address"
 			:class="check.status"
 			:value="emailAddressTemp"
 			@click="deleteEmailAddress"
@@ -38,7 +38,7 @@
 		<ActionButton v-if="$route.name === 'publicVote'"
 			:disabled="!emailAddress"
 			:value="emailAddress"
-			icon="icon-share"
+			icon="icon-md-send-link-per-email"
 			@click="resendInvitation()">
 			{{ t('polls', 'Get your personal link per mail') }}
 		</ActionButton>
@@ -50,14 +50,14 @@
 		</ActionCheckbox>
 		<ActionButton v-if="$route.name === 'publicVote' && emailAddress"
 			:disabled="!emailAddress"
-			icon="icon-delete"
+			icon="icon-md-delete"
 			@click="deleteEmailAddress">
 			{{ t('polls', 'Remove Email Address') }}
 		</ActionButton>
-		<ActionButton v-if="acl.allowEdit" icon="icon-clippy" @click="getAddresses()">
+		<ActionButton v-if="acl.allowEdit" icon="icon-md-clippy" @click="getAddresses()">
 			{{ t('polls', 'Copy list of email addresses to clipboard') }}
 		</ActionButton>
-		<ActionButton icon="icon-history" @click="resetVotes()">
+		<ActionButton icon="icon-md-reset-votes" @click="resetVotes()">
 			{{ t('polls', 'Reset your votes') }}
 		</ActionButton>
 	</Actions>