replace the rest of the rest

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

12 files changed, 208 insertions, 607 deletions

diff --git a/src/js/assets/icons/material-design/format-list-numbered.svg b/src/js/assets/icons/material-design/format-list-numbered.svg
new file mode 100644
index 00000000..8a0fac2d
--- /dev/null
+++ b/src/js/assets/icons/material-design/format-list-numbered.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z" /></svg>
\ No newline at end of file
diff --git a/src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg b/src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg
new file mode 100644
index 00000000..af3ff0d3
--- /dev/null
+++ b/src/js/assets/icons/material-design/polls-shield-crown-outline-strike-thru.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M 12 1 L 6.2246094 3.5664062 L 7.7382812 5.0800781 L 12 3.1796875 L 19 6.3007812 L 19 11.220703 C 19 12.637983 18.643799 14.066906 18.041016 15.386719 L 19.527344 16.875 C 20.464898 15.090266 21 13.070015 21 11 L 21 5 L 12 1 z M 1.4101562 1.5800781 L 0 3 L 3 6 L 3 11 C 3 16.55 6.84 21.74 12 23 C 13.934538 22.527613 15.682612 21.502326 17.113281 20.113281 L 17.115234 20.113281 L 20.75 23.75 L 22.160156 22.339844 L 18.433594 18.611328 C 18.434683 18.609871 18.436412 18.60888 18.4375 18.607422 L 17.021484 17.191406 C 17.020461 17.192881 17.018602 17.193838 17.017578 17.195312 L 15.746094 15.923828 C 15.747717 15.922943 15.748389 15.920819 15.75 15.919922 L 13.830078 14 L 13.824219 14 L 12.824219 13 L 12.830078 13 L 10.085938 10.253906 L 10.082031 10.257812 L 5.7832031 5.953125 L 4.2675781 4.4375 L 1.4101562 1.5800781 z M 5 8 L 7.5 10.5 L 8 13 L 10 13 L 11 14 L 8 14 L 8 15.5 L 8 15.589844 C 8.04 15.809844 8.2207031 15.96 8.4707031 16 L 8.5703125 16 L 13 16 L 15.734375 18.734375 C 14.640664 19.827028 13.353093 20.639175 12 21 C 8.25 20 5 15.540703 5 11.220703 L 5 8 z M 17 8 L 14.330078 10.669922 L 12 8.3398438 L 11.498047 8.8417969 L 15.654297 13 L 16 13 L 17 8 z " />
+</svg>
diff --git a/src/js/assets/icons/material-design/sort-clock-ascending-outline.svg b/src/js/assets/icons/material-design/sort-clock-ascending-outline.svg
new file mode 100644
index 00000000..9cfe0e71
--- /dev/null
+++ b/src/js/assets/icons/material-design/sort-clock-ascending-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 17H23L19 21L15 17H18V3H20V17M8 5C4.14 5 1 8.13 1 12C1 15.87 4.13 19 8 19C11.86 19 15 15.87 15 12C15 8.13 11.87 5 8 5M8 7.15C10.67 7.15 12.85 9.32 12.85 12C12.85 14.68 10.68 16.85 8 16.85C5.32 16.85 3.15 14.68 3.15 12C3.15 9.32 5.32 7.15 8 7.15M7 9V12.69L10.19 14.53L10.94 13.23L8.5 11.82V9" /></svg>
\ No newline at end of file
diff --git a/src/js/assets/scss/hacks.scss b/src/js/assets/scss/hacks.scss
index deac6e05..395c97a6 100644
--- a/src/js/assets/scss/hacks.scss
+++ b/src/js/assets/scss/hacks.scss
@@ -14,6 +14,10 @@
 	}
 }
 
+.mx-input-wrapper .button-vue--vue-primary .material-design-icon__svg {
+	fill: var(--color-primary-text);
+}
+
 .mx-datepicker-main .checkbox-radio-switch--checked svg {
 	fill: var(--color-primary-element);
 }
diff --git a/src/js/assets/scss/icons-md.scss b/src/js/assets/scss/icons-md.scss
index 24a4c950..ee8f8fe0 100644
--- a/src/js/assets/scss/icons-md.scss
+++ b/src/js/assets/scss/icons-md.scss
@@ -1,61 +1,71 @@
 // material design icons
 :root {
-	--icon-md-exclamation-thick: url('../icons/material-design/exclamation-thick.svg');
-	--icon-md-wrench: url('../icons/material-design/wrench.svg');
-	--icon-md-format-list-checks: url('../icons/material-design/format-list-checks.svg');
-	--icon-md-share-variant: url('../icons/material-design/share-variant.svg');
-	--icon-md-comment-processing: url('../icons/material-design/comment-processing.svg');
-	--icon-md-lock: url('../icons/material-design/lock.svg');
-	--icon-md-clock-outline: url('../icons/material-design/clock-outline.svg');
-	--icon-md-poll: url('../icons/material-design/poll.svg');
-	--icon-md-link-variant: url('../icons/material-design/link-variant.svg');
+	--icon-md-account-check: url('../icons/material-design/account-check.svg');
+	--icon-md-account-group: url('../icons/material-design/account-group.svg');
+	--icon-md-account-cog: url('../icons/material-design/account-cog.svg');
+	--icon-md-archive: url('../icons/material-design/archive.svg');
+	--icon-md-bell: url('../icons/material-design/bell.svg');
+	--icon-md-bell-off: url('../icons/material-design/bell-off.svg');
 	--icon-md-calendar-month: url('../icons/material-design/calendar-month.svg');
 	--icon-md-calendar-blank: url('../icons/material-design/calendar-blank.svg');
 	--icon-md-calendar-end: url('../icons/material-design/calendar-end.svg');
-	--icon-md-format-list-bulleted-square: url('../icons/material-design/format-list-bulleted-square.svg');
-	--icon-md-format-list-checkbox: url('../icons/material-design/format-list-checkbox.svg');
-	--icon-md-earth: url('../icons/material-design/earth.svg');
-	--icon-md-email-edit-outline: url('../icons/material-design/email-edit-outline.svg');
-	--icon-md-archive: url('../icons/material-design/archive.svg');
-	--icon-md-crown: url('../icons/material-design/crown.svg');
-	--icon-md-shield-crown-outline: url('../icons/material-design/shield-crown-outline.svg');
-	--icon-md-email: url('../icons/material-design/email.svg');
 	--icon-md-check: url('../icons/material-design/check.svg');
+	--icon-md-clipboard-arrow-left-outline: url('../icons/material-design/clipboard-arrow-left-outline.svg');
 	--icon-md-close: url('../icons/material-design/close.svg');
-	--icon-md-polls-maybe: url('../icons/material-design/polls-maybe.svg');
-	--icon-md-offer: url('../icons/material-design/offer.svg');
-	--icon-md-map-clock-outline: url('../icons/material-design/map-clock-outline.svg');
+	--icon-md-clock-outline: url('../icons/material-design/clock-outline.svg');
+	--icon-md-checkbox-marked-outline: url('../icons/material-design/checkbox-marked-outline.svg');
+	--icon-md-cog: url('../icons/material-design/cog.svg');
+	--icon-md-comment-processing: url('../icons/material-design/comment-processing.svg');
 	--icon-md-content-copy: url('../icons/material-design/content-copy.svg');
-	--icon-md-account-cog: url('../icons/material-design/account-cog.svg');
-	--icon-md-recycle: url('../icons/material-design/recycle.svg');
+	--icon-md-crown: url('../icons/material-design/crown.svg');
+	--icon-md-delete: url('../icons/material-design/delete.svg');
+	--icon-md-earth: url('../icons/material-design/earth.svg');
+	--icon-md-email: url('../icons/material-design/email.svg');
+	--icon-md-email-edit-outline: url('../icons/material-design/email-edit-outline.svg');
+	--icon-md-exclamation-thick: url('../icons/material-design/exclamation-thick.svg');
+	--icon-md-format-list-bulleted-square: url('../icons/material-design/format-list-bulleted-square.svg');
+	--icon-md-format-list-checkbox: url('../icons/material-design/format-list-checkbox.svg');
+	--icon-md-format-list-numbered: url('../icons/material-design/format-list-numbered.svg');
+	--icon-md-format-list-checks: url('../icons/material-design/format-list-checks.svg');
+	--icon-md-incognito: url('../icons/material-design/incognito.svg');
+	--icon-md-link-variant: url('../icons/material-design/link-variant.svg');
+	--icon-md-lock: url('../icons/material-design/lock.svg');
+	--icon-md-lock-open-variant: url('../icons/material-design/lock-open-variant.svg');
 	--icon-md-key: url('../icons/material-design/key.svg');
+	--icon-md-map-clock-outline: url('../icons/material-design/map-clock-outline.svg');
 	--icon-md-monitor: url('../icons/material-design/monitor.svg');
-	--icon-md-monitor-off: url('../icons/material-design/monitor-off.svg');
 	--icon-md-monitor-lock: url('../icons/material-design/monitor-lock.svg');
-	--icon-md-delete: url('../icons/material-design/delete.svg');
+	--icon-md-monitor-off: url('../icons/material-design/monitor-off.svg');
+	--icon-md-offer: url('../icons/material-design/offer.svg');
+	--icon-md-poll: url('../icons/material-design/poll.svg');
+	--icon-md-polls-maybe: url('../icons/material-design/polls-maybe.svg');
+	--icon-md-recycle: url('../icons/material-design/recycle.svg');
+	--icon-md-share-variant: url('../icons/material-design/share-variant.svg');
+	--icon-md-shield-crown-outline: url('../icons/material-design/shield-crown-outline.svg');
+	--icon-md-polls-shield-crown-outline-strike-thru: url('../icons/material-design/polls-shield-crown-outline-strike-thru.svg');
+	--icon-md-sort-clock-ascending-outline: url('../icons/material-design/sort-clock-ascending-outline.svg');
 	--icon-md-undo: url('../icons/material-design/undo.svg');
-	--icon-md-cog: url('../icons/material-design/cog.svg');
-	--icon-md-account-group: url('../icons/material-design/account-group.svg');
-	--icon-md-incognito: url('../icons/material-design/incognito.svg');
-	--icon-md-bell: url('../icons/material-design/bell.svg');
-	--icon-md-bell-off: url('../icons/material-design/bell-off.svg');
-	--icon-md-account-check: url('../icons/material-design/account-check.svg');
-	--icon-md-lock-open-variant: url('../icons/material-design/lock-open-variant.svg');
 	--icon-md-vector-combine: url('../icons/material-design/vector-combine.svg');
-	--icon-md-clipboard-arrow-left-outline: url('../icons/material-design/clipboard-arrow-left-outline.svg');
-	--icon-md-checkbox-marked-outline: url('../icons/material-design/checkbox-marked-outline.svg');
+	--icon-md-wrench: url('../icons/material-design/wrench.svg');
+
+
+	--icon-size: 18px;
+	--icon-md-color-default: #000;
+	--icon-color-dark: #000;
+	--icon-md-color-light: #fff;
 }
 
 [class*='icon-mask-md-'] {
 	background-color: #000;
-	mask-repeat: no-repeat;
-	mask-position: center;
-	mask-size: 18px;
-	&.empty-content__icon {
-		mask-size: 64px;
-	}
 }
 
+// .material-design-icon {
+// 	display: flex;
+// 	align-self: center;
+// 	align-items: center;
+// 	justify-content: center;
+// }
+
 .theme--dark {
 	&[class*='icon-mask-md-'] {
 		background-color: #000 !important;
@@ -65,229 +75,91 @@
 	}
 }
 
-// material design icons
-.icon-mask-md-navigation-relevant {
-    -webkit-mask-image: var(--icon-md-exclamation-thick);
-    mask-image: var(--icon-md-exclamation-thick);
-}
-
-.icon-mask-md-navigation-my,
-.icon-mask-md-owner {
-	-webkit-mask-image: var(--icon-md-crown);
-	mask-image: var(--icon-md-crown);
+@mixin svg-icon($url) {
+    background-image: $url;
 }
 
-.icon-mask-md-navigation-private,
-.icon-mask-md-private-poll {
-    -webkit-mask-image: var(--icon-md-key);
-    mask-image: var(--icon-md-key);
-}
-
-.icon-mask-md-navigation-open,
-.icon-mask-md-open-poll {
-    -webkit-mask-image: var(--icon-md-earth);
-    mask-image: var(--icon-md-earth);
-}
-
-.icon-mask-md-navigation-participated {
-    -webkit-mask-image: var(--icon-md-account-check);
-    mask-image: var(--icon-md-account-check);
-}
-
-.icon-mask-md-navigation-all {
-    -webkit-mask-image: var(--icon-md-poll);
-    mask-image: var(--icon-md-poll);
-}
-
-.icon-mask-md-navigation-closed, .icon-mask-md-closed-poll {
-    -webkit-mask-image: var(--icon-md-lock);
-    mask-image: var(--icon-md-lock);
-}
-
-.icon-mask-md-navigation-archived,
-.icon-mask-md-archived-poll,
-.icon-mask-md-archive-poll {
-    -webkit-mask-image: var(--icon-md-archive);
-    mask-image: var(--icon-md-archive);
-}
-
-.icon-mask-md-navigation-combo {
-    -webkit-mask-image: var(--icon-md-vector-combine);
-    mask-image: var(--icon-md-vector-combine);
-}
-
-.icon-mask-md-navigation-administration {
-    -webkit-mask-image: var(--icon-md-cog);
-    mask-image: var(--icon-md-cog);
-}
-
-.icon-mask-md-navigation-personal-settings {
-    -webkit-mask-image: var(--icon-md-account-cog);
-    mask-image: var(--icon-md-account-cog);
-}
-
-.icon-mask-md-sidebar-options {
-    -webkit-mask-image: var(--icon-md-format-list-checks);
-    mask-image: var(--icon-md-format-list-checks);
-}
-
-.icon-mask-md-email {
-    -webkit-mask-image: var(--icon-md-email);
-    mask-image: var(--icon-md-email);
-}
-
-.icon-svg-md-email {
-	background-image: var(--icon-md-email);
-}
-
-.icon-mask-md-admin {
-    -webkit-mask-image: var(--icon-md-shield-crown-outline);
-    mask-image: var(--icon-md-shield-crown-outline);
-}
-
-.icon-mask-md-sidebar-configuration {
-    -webkit-mask-image: var(--icon-md-wrench);
-    mask-image: var(--icon-md-wrench);
-}
-
-.icon-mask-md-sidebar-comments {
-    -webkit-mask-image: var(--icon-md-comment-processing);
-    mask-image: var(--icon-md-comment-processing);
-}
-
-.icon-mask-md-sidebar-share {
-    -webkit-mask-image: var(--icon-md-share-variant);
-    mask-image: var(--icon-md-share-variant);
-}
-
-.icon-mask-md-date-options {
-	-webkit-mask-image: var(--icon-md-calendar-month);
-    mask-image: var(--icon-md-calendar-month);
-}
-
-.icon-mask-md-date-poll {
-	-webkit-mask-image: var(--icon-md-calendar-blank);
-    mask-image: var(--icon-md-calendar-blank);
-}
-
-.icon-mask-md-anonymous-poll {
-	-webkit-mask-image: var(--icon-md-incognito);
-    mask-image: var(--icon-md-incognito);
-}
-
-.icon-mask-md-text-poll {
-	-webkit-mask-image: var(--icon-md-format-list-bulleted-square);
-    mask-image: var(--icon-md-format-list-bulleted-square);
-}
-
-.icon-mask-md-clone-poll {
-	-webkit-mask-image: var(--icon-md-content-copy);
-    mask-image: var(--icon-md-content-copy);
-}
-
-.icon-mask-md-restore-poll {
-	-webkit-mask-image: var(--icon-md-recycle);
-    mask-image: var(--icon-md-recycle);
-}
-
-.icon-mask-md-delete-poll {
-	-webkit-mask-image: var(--icon-md-delete);
-    mask-image: var(--icon-md-delete);
-}
-
-.icon-mask-md-expiration {
-	-webkit-mask-image: var(--icon-md-calendar-end);
-    mask-image: var(--icon-md-calendar-end);
-}
-
-.icon-mask-md-creation {
-	-webkit-mask-image: var(--icon-md-clock-outline);
-    mask-image: var(--icon-md-clock-outline);
-}
-
-.icon-mask-md-clippy {
-	-webkit-mask-image: var(--icon-md-clipboard-arrow-left-outline);
-    mask-image: var(--icon-md-clipboard-arrow-left-outline);
-}
-
-.icon-mask-md-reset-votes {
-	-webkit-mask-image: var(--icon-md-undo);
-    mask-image: var(--icon-md-undo);
-}
-
-.icon-mask-md-subscribed {
-	-webkit-mask-image: var(--icon-md-bell);
-    mask-image: var(--icon-md-bell);
-}
-
-.icon-mask-md-unsubscribed {
-	-webkit-mask-image: var(--icon-md-bell-off);
-    mask-image: var(--icon-md-bell-off);
-}
-
-.icon-mask-md-participants {
-	-webkit-mask-image: var(--icon-md-account-group);
-    mask-image: var(--icon-md-account-group);
-}
-
-.icon-mask-md-show-results {
-	-webkit-mask-image: var(--icon-md-monitor);
-    mask-image: var(--icon-md-monitor);
-}
-
-.icon-mask-md-hide-results-until-closed {
-	-webkit-mask-image: var(--icon-md-monitor-lock);
-    mask-image: var(--icon-md-monitor-lock);
-}
-
-.icon-mask-md-show-results-never {
-	-webkit-mask-image: var(--icon-md-monitor-off);
-    mask-image: var(--icon-md-monitor-off);
-}
-
-.icon-mask-md-options {
-	-webkit-mask-image: var(--icon-md-format-list-checkbox);
-    mask-image: var(--icon-md-format-list-checkbox);
-}
-
-.icon-mask-md-timezone {
-	-webkit-mask-image: var(--icon-md-map-clock-outline);
-    mask-image: var(--icon-md-map-clock-outline);
-}
-
-.icon-mask-md-proposals-allowed,
-.icon-mask-md-proposals {
-	-webkit-mask-image: var(--icon-md-offer);
-    mask-image: var(--icon-md-offer);
+// masked svg background icon
+@mixin masked-icon($url, $color: var(--icon-md-color-default)) {
+    -webkit-mask-image: $url;
+    mask-image: $url;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-size: var(--icon-size);
+	background-color: $color;
 }
 
-.icon-mask-md-edit-email-address {
-	-webkit-mask-image: var(--icon-md-email-edit);
-    mask-image: var(--icon-md-email-edit);
-}
 
-.icon-mask-md-send-link-per-email {
-	-webkit-mask-image: var(--icon-md-link-variant);
-    mask-image: var(--icon-md-link-variant);
-}
+// material design icons
+// just svg background icon
+.icon-svg-md-email { @include svg-icon(var(--icon-md-email)); }
+.icon-svg-md-share { @include svg-icon(var(--icon-md-share-variant)); }
+.icon-svg-md-link { @include svg-icon(var(--icon-md-link-variant)); }
+
+.icon-mask-md-navigation-relevant { @include masked-icon(var(--icon-md-exclamation-thick)); }
+.icon-mask-md-navigation-my { @include masked-icon(var(--icon-md-crown)); }
+.icon-mask-md-owner { @include masked-icon(var(--icon-md-crown)); }
+.icon-mask-md-navigation-private { @include masked-icon(var(--icon-md-key)); }
+.icon-mask-md-private-poll { @include masked-icon(var(--icon-md-key)); }
+.icon-mask-md-navigation-open { @include masked-icon(var(--icon-md-earth)); }
+.icon-mask-md-open-poll { @include masked-icon(var(--icon-md-earth)); }
+.icon-mask-md-navigation-participated { @include masked-icon(var(--icon-md-account-check)); }
+.icon-mask-md-navigation-all { @include masked-icon(var(--icon-md-poll)); }
+.icon-mask-md-navigation-closed, .icon-mask-md-closed-poll { @include masked-icon(var(--icon-md-lock)); }
+.icon-mask-md-navigation-archived { @include masked-icon(var(--icon-md-archive)); }
+.icon-mask-md-archived-poll { @include masked-icon(var(--icon-md-archive)); }
+.icon-mask-md-archive-poll { @include masked-icon(var(--icon-md-archive)); }
+.icon-mask-md-navigation-combo { @include masked-icon(var(--icon-md-vector-combine)); }
+.icon-mask-md-navigation-administration { @include masked-icon(var(--icon-md-cog)); }
+.icon-mask-md-navigation-personal-settings { @include masked-icon(var(--icon-md-account-cog)); }
+.icon-mask-md-sidebar-options { @include masked-icon(var(--icon-md-format-list-checks)); }
+.icon-mask-md-email { @include masked-icon(var(--icon-md-email)); }
+.icon-mask-md-admin { @include masked-icon(var(--icon-md-shield-crown-outline)); }
+.icon-mask-md-admin-remove { @include masked-icon(var(--icon-md-shield-crown-outline-strike-thru)); }
+.icon-mask-md-sidebar-configuration { @include masked-icon(var(--icon-md-wrench)); }
+.icon-mask-md-sidebar-comments { @include masked-icon(var(--icon-md-comment-processing)); }
+.icon-mask-md-sidebar-share { @include masked-icon(var(--icon-md-share-variant)); }
+.icon-mask-md-date-options { @include masked-icon(var(--icon-md-calendar-month)); }
+.icon-mask-md-date-poll { @include masked-icon(var(--icon-md-calendar-blank)); }
+.icon-mask-md-anonymous-poll { @include masked-icon(var(--icon-md-incognito)); }
+.icon-mask-md-text-poll { @include masked-icon(var(--icon-md-format-list-bulleted-square)); }
+.icon-mask-md-clone-poll { @include masked-icon(var(--icon-md-content-copy)); }
+.icon-mask-md-restore-poll { @include masked-icon(var(--icon-md-recycle)); }
+.icon-mask-md-delete-poll { @include masked-icon(var(--icon-md-delete)); }
+.icon-mask-md-expiration { @include masked-icon(var(--icon-md-calendar-end)); }
+.icon-mask-md-creation { @include masked-icon(var(--icon-md-clock-outline)); }
+.icon-mask-md-clippy { @include masked-icon(var(--icon-md-clipboard-arrow-left-outline)); }
+.icon-mask-md-reset-votes { @include masked-icon(var(--icon-md-undo)); }
+.icon-mask-md-subscribed { @include masked-icon(var(--icon-md-bell)); }
+.icon-mask-md-unsubscribed { @include masked-icon(var(--icon-md-bell-off)); }
+.icon-mask-md-participants { @include masked-icon(var(--icon-md-account-group)); }
+.icon-mask-md-show-results { @include masked-icon(var(--icon-md-monitor)); }
+.icon-mask-md-hide-results-until-closed { @include masked-icon(var(--icon-md-monitor-lock)); }
+.icon-mask-md-show-results-never { @include masked-icon(var(--icon-md-monitor-off)); }
+.icon-mask-md-options { @include masked-icon(var(--icon-md-format-list-checkbox)); }
+.icon-mask-md-timezone { @include masked-icon(var(--icon-md-map-clock-outline)); }
+.icon-mask-md-proposals-allowed { @include masked-icon(var(--icon-md-offer)); }
+.icon-mask-md-proposals { @include masked-icon(var(--icon-md-offer)); }
+.icon-mask-md-edit-email-address { @include masked-icon(var(--icon-md-email-edit)); }
+.icon-mask-md-send-link-per-email { @include masked-icon(var(--icon-md-link-variant)); }
+.icon-mask-md-options-order-ranked { @include masked-icon(var(--icon-md-format-list-numbered)); }
+.icon-mask-md-options-order-original { @include masked-icon(var(--icon-md-format-list-bulleted-square)); }
+.icon-mask-md-options-order-date { @include masked-icon(var(--icon-md-sort-clock-ascending-outline)); }
 
 .icon-mask-md-yes-vote,
 .icon-mask-md-yes-votes {
 	background-color: var(--color-polls-foreground-yes) !important;
-	-webkit-mask-image: var(--icon-md-check);
-    mask-image: var(--icon-md-check);
+	@include masked-icon(var(--icon-md-check));
 }
 
 .icon-mask-md-no-vote,
 .icon-mask-md-no-votes {
 	background-color: var(--color-polls-foreground-no) !important;
-	-webkit-mask-image: var(--icon-md-close);
-    mask-image: var(--icon-md-close);
+	@include masked-icon(var(--icon-md-close));
 }
 
 .icon-mask-md-maybe-vote,
 .icon-mask-md-maybe-votes {
 	background-color: var(--color-polls-foreground-maybe) !important;
-	-webkit-mask-image: var(--icon-md-polls-maybe);
-    mask-image: var(--icon-md-polls-maybe);
+	@include masked-icon(var(--icon-md-polls-maybe));
 }
diff --git a/src/js/components/Actions/ActionChangeView.vue b/src/js/components/Actions/ActionChangeView.vue
index a1ef82b7..f9263d7c 100644
--- a/src/js/components/Actions/ActionChangeView.vue
+++ b/src/js/components/Actions/ActionChangeView.vue
@@ -22,39 +22,29 @@
 
 <template>
 	<div class="action change-view">
-		<ButtonDiv v-if="buttonMode"
-			:title="caption"
-			simple
-			:icon="icon"
-			@click="clickAction()" />
-		<Actions v-else>
-			<ActionButton :icon="icon" @click="clickAction()">
-				{{ caption }}
-			</ActionButton>
-		</Actions>
+		<VueButton v-tooltip="caption"
+			type="tertiary"
+			@click="clickAction()">
+			<ListViewIcon v-if="viewMode === 'table-view'" />
+			<TableViewIcon v-else />
+		</VueButton>
 	</div>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton } from '@nextcloud/vue'
-import ButtonDiv from '../Base/ButtonDiv'
+import { Button as VueButton } from '@nextcloud/vue'
 import { emit } from '@nextcloud/event-bus'
+import ListViewIcon from 'vue-material-design-icons/ViewListOutline.vue' // view-sequential-outline
+import TableViewIcon from 'vue-material-design-icons/Table.vue' // view-comfy-outline
 
 export default {
 	name: 'ActionChangeView',
 
 	components: {
-		Actions,
-		ActionButton,
-		ButtonDiv,
-	},
-
-	props: {
-		buttonMode: {
-			type: Boolean,
-			default: false,
-		},
+		ListViewIcon,
+		TableViewIcon,
+		VueButton,
 	},
 
 	computed: {
@@ -74,16 +64,8 @@ export default {
 				return t('polls', 'Switch to list view')
 			}
 			return t('polls', 'Switch to table view')
-
 		},
 
-		icon() {
-			if (this.viewMode === 'table-view') {
-				return 'icon-list-view'
-			}
-			return 'icon-table-view'
-
-		},
 	},
 
 	methods: {
diff --git a/src/js/components/Actions/ActionSortOptions.vue b/src/js/components/Actions/ActionSortOptions.vue
index bcf09854..adcc8f6a 100644
--- a/src/js/components/Actions/ActionSortOptions.vue
+++ b/src/js/components/Actions/ActionSortOptions.vue
@@ -22,38 +22,31 @@
 
 <template>
 	<div class="action sort-options">
-		<ButtonDiv v-if="buttonMode"
-			:title="caption"
-			simple
-			:icon="icon"
-			@click="clickAction()" />
-		<Actions v-else>
-			<ActionButton :icon="icon" @click="clickAction()">
-				{{ caption }}
-			</ActionButton>
-		</Actions>
+		<VueButton v-tooltip="caption"
+			type="tertiary"
+			@click="clickAction()">
+			<SortByDateOptionIcon v-if="isRanked && pollType === 'datePoll'" />
+			<SortByOriginalOrderIcon v-else-if="isRanked && pollType === 'textPoll'" />
+			<SortByRankIcon v-else />
+		</VueButton>
 	</div>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
-import { Actions, ActionButton } from '@nextcloud/vue'
-import ButtonDiv from '../Base/ButtonDiv'
+import { Button as VueButton } from '@nextcloud/vue'
+import SortByOriginalOrderIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
+import SortByRankIcon from 'vue-material-design-icons/FormatListNumbered.vue'
+import SortByDateOptionIcon from 'vue-material-design-icons/SortClockAscendingOutline.vue'
 
 export default {
 	name: 'ActionSortOptions',
 
 	components: {
-		Actions,
-		ActionButton,
-		ButtonDiv,
-	},
-
-	props: {
-		buttonMode: {
-			type: Boolean,
-			default: false,
-		},
+		SortByRankIcon,
+		SortByOriginalOrderIcon,
+		SortByDateOptionIcon,
+		VueButton,
 	},
 
 	computed: {
@@ -63,27 +56,15 @@ export default {
 		}),
 
 		caption() {
-			if (this.isRanked) {
-				if (this.pollType === 'datePoll') {
-					return t('polls', 'Date order')
-				}
-				return t('polls', 'Original order')
-
+			if (this.isRanked && this.pollType === 'datePoll') {
+				return t('polls', 'Date order')
 			}
-			return t('polls', 'Ranked order')
-
-		},
-
-		icon() {
-			if (this.isRanked) {
-				if (this.pollType === 'datePoll') {
-					return 'icon-calendar-000'
-				}
-				return 'icon-toggle-filelist'
 
+			if (this.isRanked && this.pollType === 'textPoll') {
+				return t('polls', 'Original order')
 			}
-			return 'icon-quota'
 
+			return t('polls', 'Ranked order')
 		},
 	},
 
diff --git a/src/js/components/PollList/PollItemAdmin.vue b/src/js/components/PollList/PollItemAdmin.vue
deleted file mode 100644
index 03df6497..00000000
--- a/src/js/components/PollList/PollItemAdmin.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div v-if="header" class="poll-item__header">
-		<div class="item__title sortable" @click="$emit('sort-list', {sort: 'title'})">
-			{{ t('polls', 'Title') }}
-			<span :class="['sort-indicator', { 'hidden': sort !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
-		</div>
-
-		<div class="item__icon-spacer" />
-
-		<div class="item__access sortable" @click="$emit('sort-list', {sort: 'access'})">
-			{{ t('polls', 'Access') }}
-			<span :class="['sort-indicator', { 'hidden': sort !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
-		</div>
-
-		<div class="item__owner sortable" @click="$emit('sort-list', {sort: 'owner.displayName'})">
-			{{ t('polls', 'Owner') }}
-			<span :class="['sort-indicator', { 'hidden': sort !== 'owner.displayName'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
-		</div>
-
-		<div class="wrapper">
-			<div class="item__created sortable" @click="$emit('sort-list', {sort: 'created'})">
-				{{ t('polls', 'Created') }}
-				<span :class="['sort-indicator', { 'hidden': sort !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
-			</div>
-
-			<div class="item__expiry sortable" @click="$emit('sort-list', {sort: 'expire'})">
-				{{ t('polls', 'Closing date') }}
-				<span :class="['sort-indicator', { 'hidden': sort !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
-			</div>
-		</div>
-	</div>
-
-	<div v-else class="poll-item__item" :class="{ closed: closed, active: (poll.id === $store.state.poll.id) }">
-		<div v-tooltip.auto="pollTypeName" :class="pollTypeIcon" />
-
-		<div class="item__title">
-			<div class="item__title__title">
-				{{ poll.title }}
-			</div>
-			<div class="item__title__description">
-				{{ 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 }}
-			</div>
-			<div class="item__expiry">
-				{{ timeExpirationRelative }}
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import moment from '@nextcloud/moment'
-
-export default {
-	name: 'PollItemAdmin',
-
-	props: {
-		header: {
-			type: Boolean,
-			default: false,
-		},
-		poll: {
-			type: Object,
-			default: undefined,
-		},
-		sort: {
-			type: String,
-			default: 'created',
-		},
-		reverse: {
-			type: Boolean,
-			default: true,
-		},
-	},
-
-	computed: {
-		...mapGetters({
-			closed: 'poll/isClosed',
-		}),
-
-		accessType() {
-			if (this.poll.access === 'open') {
-				return t('polls', 'Open poll')
-			}
-			return t('polls', 'Private poll')
-
-		},
-
-		pollTypeName() {
-			if (this.poll.type === 'textPoll') {
-				return t('polls', 'Text poll')
-			}
-
-			return t('polls', 'Date poll')
-		},
-
-		pollTypeIcon() {
-			if (this.poll.type === 'textPoll') {
-				return 'icon-mask-md-text-poll'
-			}
-
-			return 'icon-mask-md-date-poll'
-		},
-
-		timeExpirationRelative() {
-			if (this.poll.expire) {
-				return moment.unix(this.poll.expire).fromNow()
-			}
-			return t('polls', 'never')
-
-		},
-		timeCreatedRelative() {
-			return moment.unix(this.poll.created).fromNow()
-		},
-	},
-}
-</script>
-
-<style lang="scss">
-
-[class^='item__'] {
-	padding-right: 8px;
-	display: flex;
-	align-items: center;
-	flex: 0 0 auto;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-
-}
-
-.item__icon-spacer {
-	width: 44px;
-	min-width: 44px;
-}
-
-.item__title {
-	display: flex;
-	flex-direction: column;
-	flex: 1 0 auto;
-	align-items: stretch;
-	width: 210px;
-}
-
-.item__title__description {
-	opacity: 0.5;
-}
-
-.item__access {
-	width: 80px;
-}
-
-.item__owner {
-	width: 230px;
-}
-
-.wrapper {
-	width: 240px;
-	display: flex;
-	flex: 0 1 auto;
-	flex-wrap: wrap;
-}
-
-.item__created, .item__expiry {
-	width: 110px;
-}
-
-.closed {
-	.item__expiry {
-		color: var(--color-error);
-	}
-}
-
-[class^='poll-item__'] {
-	display: flex;
-	flex: 1;
-	padding: 4px 8px;
-	border-bottom: 1px solid var(--color-border-dark);
-}
-
-.poll-item__header {
-	opacity: 0.7;
-	flex: auto;
-	height: 4em;
-	align-items: center;
-	padding-left: 52px;
-}
-
-.sortable {
-	cursor: pointer;
-	&:hover {
-		.sort-indicator.hidden {
-			visibility: visible;
-			display: block;
-		}
-	}
-}
-
-[class^='item__type'] {
-	width: 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	min-width: 16px;
-	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: 44px;
-	background-repeat: no-repeat;
-	background-position: center;
-	min-width: 16px;
-	min-height: 16px;
-}
-
-.item__access--public {
-	background-image: var(--icon-polls-open-poll);
-}
-
-.item__access--hidden {
-	background-image: var(--icon-polls-private-poll);
-}
-
-.poll-item__item {
-	&.active {
-		background-color: var(--color-primary-light);
-	}
-	&:hover {
-		background-color: var(--color-background-hover);
-	}
-}
-
-</style>
diff --git a/src/js/components/Shares/SharesList.vue b/src/js/components/Shares/SharesList.vue
index 316da927..7df2d793 100644
--- a/src/js/components/Shares/SharesList.vue
+++ b/src/js/components/Shares/SharesList.vue
@@ -49,17 +49,47 @@
 					</template>
 
 					<Actions>
-						<ActionButton v-if="share.emailAddress || share.type === 'group'"
-							icon="icon-confirm"
-							@click="sendInvitation(share)">
+						<ActionButton v-if="share.emailAddress || share.type === 'group'" @click="sendInvitation(share)">
+							<template #icon>
+								<SendEmailIcon />
+							</template>
 							{{ share.invitationSent ? t('polls', 'Resend invitation mail') : t('polls', 'Send invitation mail') }}
 						</ActionButton>
-						<ActionButton v-if="share.type === 'user' || share.type === 'admin'"
-							:icon="share.type === 'user' ? 'icon-user-admin' : 'icon-user'"
-							@click="switchAdmin({ share })">
+
+						<ActionButton v-if="share.type === 'user' || share.type === 'admin'" @click="switchAdmin({ share })">
+							<template #icon>
+								<span v-if="share.type === 'user'"
+									aria-hidden="true"
+									role="img"
+									class="material-design-icon shield-crown-outline">
+									<svg fill="currentColor"
+										class="material-design-icon__svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24">
+										<path d="M12 1L21 5V11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1M12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18M16 14V15.5L16 15.59C15.96 15.81 15.78 15.96 15.53 16L15.43 16H8.57L8.47 16C8.22 15.96 8.04 15.81 8 15.59L8 15.5V14H16M17 8L16 13H8L7 8L7 8L9.67 10.67L12 8.34L14.33 10.67L17 8L17 8Z" />
+									</svg>
+								</span>
+								<span v-else
+									aria-hidden="true"
+									role="img"
+									class="material-design-icon shield-crown-outline-strike-thru">
+									<svg fill="currentColor"
+										class="material-design-icon__svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24">
+										<path d="M 12 1 L 6.2246094 3.5664062 L 7.7382812 5.0800781 L 12 3.1796875 L 19 6.3007812 L 19 11.220703 C 19 12.637983 18.643799 14.066906 18.041016 15.386719 L 19.527344 16.875 C 20.464898 15.090266 21 13.070015 21 11 L 21 5 L 12 1 z M 1.4101562 1.5800781 L 0 3 L 3 6 L 3 11 C 3 16.55 6.84 21.74 12 23 C 13.934538 22.527613 15.682612 21.502326 17.113281 20.113281 L 17.115234 20.113281 L 20.75 23.75 L 22.160156 22.339844 L 18.433594 18.611328 C 18.434683 18.609871 18.436412 18.60888 18.4375 18.607422 L 17.021484 17.191406 C 17.020461 17.192881 17.018602 17.193838 17.017578 17.195312 L 15.746094 15.923828 C 15.747717 15.922943 15.748389 15.920819 15.75 15.919922 L 13.830078 14 L 13.824219 14 L 12.824219 13 L 12.830078 13 L 10.085938 10.253906 L 10.082031 10.257812 L 5.7832031 5.953125 L 4.2675781 4.4375 L 1.4101562 1.5800781 z M 5 8 L 7.5 10.5 L 8 13 L 10 13 L 11 14 L 8 14 L 8 15.5 L 8 15.589844 C 8.04 15.809844 8.2207031 15.96 8.4707031 16 L 8.5703125 16 L 13 16 L 15.734375 18.734375 C 14.640664 19.827028 13.353093 20.639175 12 21 C 8.25 20 5 15.540703 5 11.220703 L 5 8 z M 17 8 L 14.330078 10.669922 L 12 8.3398438 L 11.498047 8.8417969 L 15.654297 13 L 16 13 L 17 8 z " />
+									</svg>
+								</span>
+							</template>
 							{{ share.type === 'user' ? t('polls', 'Grant poll admin access') : t('polls', 'Withdraw poll admin access') }}
 						</ActionButton>
-						<ActionButton icon="icon-clippy" @click="copyLink( { url: share.URL })">
+
+						<ActionButton @click="copyLink( { url: share.URL })">
+							<template #icon>
+								<ClippyIcon />
+							</template>
 							{{ t('polls', 'Copy link to clipboard') }}
 						</ActionButton>
 						<ActionCaption v-if="share.type === 'public'" :title="t('polls', 'Options for the registration dialog')" />
@@ -106,12 +136,19 @@ import UserSearch from '../User/UserSearch'
 import SharePublicAdd from './SharePublicAdd'
 import ShareItemAllUsers from './ShareItemAllUsers'
 import ShareIcon from 'vue-material-design-icons/ShareVariant.vue'
+import SendEmailIcon from 'vue-material-design-icons/EmailSend.vue'
+import ClippyIcon from 'vue-material-design-icons/ClipboardArrowLeftOutline.vue'
 
 export default {
 	name: 'SharesList',
 
 	components: {
+		ClippyIcon,
 		ShareIcon,
+		SendEmailIcon,
+		UnvotedIcon,
+		UserSearch,
+		VotedIcon,
 		Actions,
 		ActionButton,
 		ActionCaption,
@@ -120,9 +157,6 @@ export default {
 		ConfigBox,
 		SharePublicAdd,
 		ShareItemAllUsers,
-		UnvotedIcon,
-		UserSearch,
-		VotedIcon,
 	},
 
 	computed: {
diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue
index eea34c08..d24be019 100644
--- a/src/js/components/User/UserItem.vue
+++ b/src/js/components/User/UserItem.vue
@@ -184,23 +184,23 @@ export default {
 
 		avatarIcon() {
 			if (this.type === 'public') {
-				return 'icon-public'
+				return 'icon-svg-md-link'
 			}
 
 			if (this.type === 'internalAccess') {
-				return 'icon-public'
+				return 'icon-svg-md-link'
 			}
 
 			if (this.type === 'contact') {
-				return 'icon-mail'
+				return 'icon-svg-md-email'
 			}
 
 			if (this.type === 'email') {
-				return 'icon-mail'
+				return 'icon-svg-md-email'
 			}
 
 			if (this.type === 'external') {
-				return 'icon-share'
+				return 'icon-svg-md-share'
 			}
 
 			if (this.type === 'contactGroup') {
diff --git a/src/js/components/User/UserMenu.vue b/src/js/components/User/UserMenu.vue
index 3b895321..d02ea849 100644
--- a/src/js/components/User/UserMenu.vue
+++ b/src/js/components/User/UserMenu.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<Actions default-icon="icon-settings" primary>
-		<ActionButton v-if="$route.name === 'publicVote'" icon="icon-clippy" @click="copyLink()">
+		<ActionButton v-if="$route.name === 'publicVote'" icon="icon-md-link" @click="copyLink()">
 			{{ t('polls', 'Copy your personal link to clipboard') }}
 		</ActionButton>
 		<ActionSeparator />
diff --git a/src/js/components/VoteTable/VoteMenu.vue b/src/js/components/VoteTable/VoteMenu.vue
index 940d4b9d..bde47c2e 100644
--- a/src/js/components/VoteTable/VoteMenu.vue
+++ b/src/js/components/VoteTable/VoteMenu.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="vote_menu">
-		<ActionSortOptions />
+		<ActionSortOptions button-mode />
 		<ActionChangeView />
 	</div>
 </template>