[web] Only include icons in bundle that are used in the web interface

web-src/package-lock.json

@@ -9,13 +9,14 @@
       "version": "2.0.0",
       "dependencies": {
         "@aacassandra/vue3-progressbar": "^1.0.3",
+        "@mdi/js": "^6.6.96",
         "@ts-pro/vue-eternal-loading": "^1.2.0",
         "@vueform/slider": "github:chme/slider#faff83ed8a77f2cdbcb7252505ef734301efd139",
         "axios": "^0.26.1",
         "bulma": "^0.9.3",
         "bulma-switch": "^2.0.4",
         "luxon": "^2.3.1",
-        "mdi": "^2.2.43",
+        "mdi-vue": "^3.0.12",
         "reconnectingwebsocket": "^1.0.0",
         "spotify-web-api-js": "^1.5.2",
         "string-to-color": "^2.2.2",
@@ -97,6 +98,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@mdi/js": {
+      "version": "6.6.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.6.96.tgz",
+      "integrity": "sha512-ke9PN5DjPCOlMfhioxeZYADz8Yiz6v47W0IYRza01SSJD7y1EwESVpwFnnFUso+eCoWtE1CO9cTIvQF6sEreuA=="
+    },
     "node_modules/@ts-pro/vue-eternal-loading": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ts-pro/vue-eternal-loading/-/vue-eternal-loading-1.2.0.tgz",
@@ -1485,11 +1491,17 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
-    "node_modules/mdi": {
+    "node_modules/mdi-vue": {
-      "version": "2.2.43",
+      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/mdi/-/mdi-2.2.43.tgz",
+      "resolved": "https://registry.npmjs.org/mdi-vue/-/mdi-vue-3.0.12.tgz",
-      "integrity": "sha512-g3m6z4303qieltUM20JL2gdsJZvoVzIzO74qa2XxZ2kg9JPwrPEAgooVhRDHZi1vvRh0gB8Dg+c9XqNdz4jcIg==",
+      "integrity": "sha512-rc4rq99Hafa7v1u3KyfzGRr13v7/AzBvNrcXdhcgPQvj8wYafimbLGfNvQcGiAYZMow40KpXlZuG07132XccKw==",
-      "deprecated": "The mdi package was renamed to @mdi/font after v2.2.43. Please rename in your package.json for future updates."
+      "dependencies": {
+        "@mdi/js": "*"
+      },
+      "peerDependencies": {
+        "@mdi/js": "*",
+        "vue": "*"
+      }
     },
     "node_modules/minimatch": {
       "version": "3.1.2",
@@ -2182,6 +2194,11 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@mdi/js": {
+      "version": "6.6.96",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-6.6.96.tgz",
+      "integrity": "sha512-ke9PN5DjPCOlMfhioxeZYADz8Yiz6v47W0IYRza01SSJD7y1EwESVpwFnnFUso+eCoWtE1CO9cTIvQF6sEreuA=="
+    },
     "@ts-pro/vue-eternal-loading": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ts-pro/vue-eternal-loading/-/vue-eternal-loading-1.2.0.tgz",
@@ -3145,10 +3162,13 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
-    "mdi": {
+    "mdi-vue": {
-      "version": "2.2.43",
+      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/mdi/-/mdi-2.2.43.tgz",
+      "resolved": "https://registry.npmjs.org/mdi-vue/-/mdi-vue-3.0.12.tgz",
-      "integrity": "sha512-g3m6z4303qieltUM20JL2gdsJZvoVzIzO74qa2XxZ2kg9JPwrPEAgooVhRDHZi1vvRh0gB8Dg+c9XqNdz4jcIg=="
+      "integrity": "sha512-rc4rq99Hafa7v1u3KyfzGRr13v7/AzBvNrcXdhcgPQvj8wYafimbLGfNvQcGiAYZMow40KpXlZuG07132XccKw==",
+      "requires": {
+        "@mdi/js": "*"
+      }
     },
     "minimatch": {
       "version": "3.1.2",

web-src/package.json

@@ -11,13 +11,14 @@
   },
   "dependencies": {
     "@aacassandra/vue3-progressbar": "^1.0.3",
+    "@mdi/js": "^6.6.96",
     "@ts-pro/vue-eternal-loading": "^1.2.0",
     "@vueform/slider": "github:chme/slider#faff83ed8a77f2cdbcb7252505ef734301efd139",
     "axios": "^0.26.1",
     "bulma": "^0.9.3",
     "bulma-switch": "^2.0.4",
     "luxon": "^2.3.1",
-    "mdi": "^2.2.43",
+    "mdi-vue": "^3.0.12",
     "reconnectingwebsocket": "^1.0.0",
     "spotify-web-api-js": "^1.5.2",
     "string-to-color": "^2.2.2",

web-src/src/components/DropdownMenu.vue

@@ -12,8 +12,8 @@
         @click="is_active = !is_active"
       >
         <span>{{ modelValue }}</span>
-        <span class="icon is-small">
+        <span class="icon">
-          <i class="mdi mdi-chevron-down" aria-hidden="true" />
+          <mdicon name="chevron-down" size="16" />
         </span>
       </button>
     </div>

web-src/src/components/ListAlbums.vue

@@ -41,7 +41,7 @@
       <div class="media-right" style="padding-top: 0.7rem">
         <a @click.prevent.stop="open_dialog(album.item)">
           <span class="icon has-text-dark"
-            ><i class="mdi mdi-dots-vertical mdi-18px"
+            ><mdicon name="dots-vertical" size="16"
           /></span>
         </a>
       </div>

web-src/src/components/ListArtists.vue

@@ -22,7 +22,7 @@
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(artist.item)">
           <span class="icon has-text-dark"
-            ><i class="mdi mdi-dots-vertical mdi-18px"
+            ><mdicon name="dots-vertical" size="16"
           /></span>
         </a>
       </div>

web-src/src/components/ListComposers.vue

@@ -22,7 +22,7 @@
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(composer.item)">
           <span class="icon has-text-dark"
-            ><i class="mdi mdi-dots-vertical mdi-18px"
+            ><mdicon name="dots-vertical" size="16"
           /></span>
         </a>
       </div>

web-src/src/components/ListDirectories.vue

@@ -6,7 +6,7 @@
   >
     <figure class="media-left fd-has-action">
       <span class="icon">
-        <i class="mdi mdi-subdirectory-arrow-left" />
+        <mdicon name="subdirectory-arrow-left" size="16" />
       </span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
@@ -20,7 +20,7 @@
     <div class="media" @click="open_directory(directory)">
       <figure class="media-left fd-has-action">
         <span class="icon">
-          <i class="mdi mdi-folder" />
+          <mdicon name="folder" size="16" />
         </span>
       </figure>
       <div class="media-content fd-has-action is-clipped">
@@ -34,7 +34,7 @@
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(directory)">
           <span class="icon has-text-dark"
-            ><i class="mdi mdi-dots-vertical mdi-18px"
+            ><mdicon name="dots-vertical" size="16"
           /></span>
         </a>
       </div>

web-src/src/components/ListGenres.vue

@@ -18,7 +18,7 @@
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(genre.item)">
           <span class="icon has-text-dark"
-            ><i class="mdi mdi-dots-vertical mdi-18px"
+            ><mdicon name="dots-vertical" size="16"
           /></span>
         </a>
       </div>

web-src/src/components/ListItemQueueItem.vue

@@ -2,7 +2,7 @@
   <div v-if="is_next || !show_only_next_items" class="media">
     <div v-if="edit_mode" class="media-left">
       <span class="icon has-text-grey fd-is-movable handle"
-        ><i class="mdi mdi-drag-horizontal mdi-18px"
+        ><mdicon name="drag-horizontal" size="16"
       /></span>
     </div>
 

web-src/src/components/ListPlaylists.vue

@@ -8,14 +8,7 @@
   >
     <figure class="media-left fd-has-action">
       <span class="icon">
-        <i
+        <mdicon :name="icon_name(playlist)" size="16" />
-          class="mdi"
-          :class="{
-            'mdi-library-music': playlist.type !== 'folder',
-            'mdi-rss': playlist.type === 'rss',
-            'mdi-folder': playlist.type === 'folder'
-          }"
-        />
       </span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
@@ -26,7 +19,7 @@
     <div class="media-right">
       <a @click.prevent.stop="open_dialog(playlist)">
         <span class="icon has-text-dark"
-          ><i class="mdi mdi-dots-vertical mdi-18px"
+          ><mdicon name="dots-vertical" size="16"
         /></span>
       </a>
     </div>
@@ -68,6 +61,16 @@ export default {
     open_dialog: function (playlist) {
       this.selected_playlist = playlist
       this.show_details_modal = true
+    },
+
+    icon_name: function (playlist) {
+      if (playlist.type === 'folder') {
+        return 'folder'
+      } else if (playlist.type === 'rss') {
+        return 'rss'
+      } else {
+        return 'music-box-multiple'
+      }
     }
   }
 }

web-src/src/components/ListTracks.vue

@@ -9,7 +9,7 @@
   >
     <figure v-if="show_icon" class="media-left fd-has-action">
       <span class="icon">
-        <i class="mdi mdi-file-outline" />
+        <mdicon name="file-outline" size="16" />
       </span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
@@ -37,7 +37,7 @@
     <div class="media-right">
       <a @click.prevent.stop="open_dialog(track)">
         <span class="icon has-text-dark"
-          ><i class="mdi mdi-dots-vertical mdi-18px"
+          ><mdicon name="dots-vertical" size="16"
         /></span>
       </a>
     </div>

web-src/src/components/ModalDialog.vue

@@ -13,7 +13,7 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="$emit('close')">
-                <span class="icon"><i class="mdi mdi-cancel" /></span>
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span class="is-size-7">{{
                   close_action ? close_action : 'Cancel'
                 }}</span>
@@ -23,7 +23,7 @@
                 class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
                 @click="$emit('delete')"
               >
-                <span class="icon"><i class="mdi mdi-delete" /></span>
+                <span class="icon"><mdicon name="delete" size="16" /></span>
                 <span class="is-size-7">{{ delete_action }}</span>
               </a>
               <a
@@ -31,7 +31,7 @@
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="$emit('ok')"
               >
-                <span class="icon"><i class="mdi mdi-check" /></span>
+                <span class="icon"><mdicon name="check" size="16" /></span>
                 <span class="is-size-7">{{ ok_action }}</span>
               </a>
             </footer>

web-src/src/components/ModalDialogAddRss.vue

@@ -19,7 +19,7 @@
                       :disabled="loading"
                     />
                     <span class="icon is-left">
-                      <i class="mdi mdi-rss" />
+                      <mdicon name="rss" size="16" />
                     </span>
                   </p>
                   <p class="help">
@@ -31,7 +31,7 @@
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item button is-loading">
-                <span class="icon"><i class="mdi mdi-web" /></span>
+                <span class="icon"><mdicon name="web" size="16" /></span>
                 <span class="is-size-7">Processing ...</span>
               </a>
             </footer>
@@ -40,14 +40,16 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><i class="mdi mdi-cancel" /></span>
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span class="is-size-7">Cancel</span>
               </a>
               <a
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="add_stream"
               >
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
             </footer>

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -19,7 +19,7 @@
                       :disabled="loading"
                     />
                     <span class="icon is-left">
-                      <i class="mdi mdi-web" />
+                      <mdicon name="web" size="16" />
                     </span>
                   </p>
                 </div>
@@ -27,7 +27,7 @@
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
-                <span class="icon"><i class="mdi mdi-web" /></span>
+                <span class="icon"><mdicon name="web" size="16" /></span>
                 <span class="is-size-7">Loading ...</span>
               </a>
             </footer>
@@ -36,18 +36,20 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><i class="mdi mdi-cancel" /></span>
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span class="is-size-7">Cancel</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="add_stream">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="play"
               >
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogAlbum.vue

@@ -68,15 +68,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogArtist.vue

@@ -34,15 +34,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogComposer.vue

@@ -32,15 +32,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogDirectory.vue

@@ -12,15 +12,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogGenre.vue

@@ -30,15 +30,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogPlaylist.vue

@@ -24,15 +24,19 @@
             </div>
             <footer v-if="!playlist.folder" class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -19,7 +19,7 @@
                       :disabled="loading"
                     />
                     <span class="icon is-left">
-                      <i class="mdi mdi-file-music" />
+                      <mdicon name="file-music" size="16" />
                     </span>
                   </p>
                 </div>
@@ -27,7 +27,7 @@
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
-                <span class="icon"><i class="mdi mdi-web" /></span>
+                <span class="icon"><mdicon name="web" size="16" /></span>
                 <span class="is-size-7">Saving ...</span>
               </a>
             </footer>
@@ -36,14 +36,16 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><i class="mdi mdi-cancel" /></span>
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span class="is-size-7">Cancel</span>
               </a>
               <a
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="save"
               >
-                <span class="icon"><i class="mdi mdi-content-save" /></span>
+                <span class="icon"
+                  ><mdicon name="content-save" size="16"
+                /></span>
                 <span class="is-size-7">Save</span>
               </a>
             </footer>

web-src/src/components/ModalDialogQueueItem.vue

@@ -92,11 +92,11 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="remove">
-                <span class="icon"><i class="mdi mdi-delete" /></span>
+                <span class="icon"><mdicon name="delete" size="16" /></span>
                 <span class="is-size-7">Remove</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/ModalDialogRemotePairing.vue

@@ -29,14 +29,14 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><i class="mdi mdi-cancel" /></span>
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span class="is-size-7">Cancel</span>
               </a>
               <a
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="kickoff_pairing"
               >
-                <span class="icon"><i class="mdi mdi-cellphone-iphone" /></span>
+                <span class="icon"><mdicon name="cellphone" size="16" /></span>
                 <span class="is-size-7">Pair Remote</span>
               </a>
             </footer>

web-src/src/components/ModalDialogTrack.vue

@@ -124,15 +124,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play_track">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/NavbarBottom.vue

@@ -12,7 +12,7 @@
     <div class="navbar-brand fd-expanded">
       <!-- Link to queue -->
       <navbar-item-link to="/" exact>
-        <span class="icon"><i class="mdi mdi-24px mdi-playlist-play" /></span>
+        <span class="icon"><mdicon name="playlist-play" size="24" /></span>
       </navbar-item-link>
 
       <!-- Now playing artist/title (not visible on "now playing" page) -->
@@ -39,31 +39,31 @@
       <player-button-previous
         v-if="is_now_playing_page"
         class="navbar-item fd-margin-left-auto"
-        icon_style="mdi-24px"
+        :icon_size="24"
       />
       <player-button-seek-back
         v-if="is_now_playing_page"
-        seek_ms="10000"
+        :seek_ms="10000"
         class="navbar-item"
-        icon_style="mdi-24px"
+        :icon_size="24"
       />
       <!-- Play/pause -->
       <player-button-play-pause
         class="navbar-item"
-        icon_style="mdi-36px"
+        :icon_size="36"
         show_disabled_message
       />
       <player-button-seek-forward
         v-if="is_now_playing_page"
-        seek_ms="30000"
+        :seek_ms="30000"
         class="navbar-item"
-        icon_style="mdi-24px"
+        :icon_size="24"
       />
       <!-- Skip next (not visible on "now playing" page) -->
       <player-button-next
         v-if="is_now_playing_page"
         class="navbar-item"
-        icon_style="mdi-24px"
+        :icon_size="24"
       />
 
       <!-- Player menu button (only visible on mobile and tablet) -->
@@ -72,12 +72,9 @@
         @click="show_player_menu = !show_player_menu"
       >
         <span class="icon"
-          ><i
+          ><mdicon
-            class="mdi mdi-18px"
+            :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
-            :class="{
+            size="18"
-              'mdi-chevron-up': !show_player_menu,
-              'mdi-chevron-down': show_player_menu
-            }"
         /></span>
       </a>
 
@@ -91,12 +88,9 @@
           @click="show_player_menu = !show_player_menu"
         >
           <span class="icon"
-            ><i
+            ><mdicon
-              class="mdi mdi-18px"
+              :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
-              :class="{
+              size="18"
-                'mdi-chevron-up': !show_player_menu,
-                'mdi-chevron-down': show_player_menu
-              }"
           /></span>
         </a>
 
@@ -114,12 +108,9 @@
                     @click="toggle_mute_volume"
                   >
                     <span class="icon"
-                      ><i
+                      ><mdicon
-                        class="mdi mdi-18px"
+                        :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                        :class="{
+                        size="18"
-                          'mdi-volume-off': player.volume <= 0,
-                          'mdi-volume-high': player.volume > 0
-                        }"
                     /></span>
                   </a>
                 </div>
@@ -173,7 +164,7 @@
                         'is-loading': loading
                       }"
                       @click="togglePlay"
-                      ><i class="mdi mdi-18px mdi-radio-tower" /></span
+                      ><mdicon name="radio-tower" size="18" /></span
                   ></a>
                 </div>
                 <div class="level-item fd-expanded">
@@ -239,9 +230,9 @@
         <!-- Repeat/shuffle/consume -->
         <div class="navbar-item">
           <div class="buttons is-centered">
-            <player-button-repeat class="button" icon_style="mdi-18px" />
+            <player-button-repeat class="button" :icon_size="18" />
-            <player-button-shuffle class="button" icon_style="mdi-18px" />
+            <player-button-shuffle class="button" :icon_size="18" />
-            <player-button-consume class="button" icon_style="mdi-18px" />
+            <player-button-consume class="button" :icon_size="18" />
           </div>
         </div>
 
@@ -254,12 +245,9 @@
               <div class="level-item" style="flex-grow: 0">
                 <a class="button is-white is-small" @click="toggle_mute_volume">
                   <span class="icon"
-                    ><i
+                    ><mdicon
-                      class="mdi mdi-18px"
+                      :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                      :class="{
+                      size="18"
-                        'mdi-volume-off': player.volume <= 0,
-                        'mdi-volume-high': player.volume > 0
-                      }"
                   /></span>
                 </a>
               </div>
@@ -313,7 +301,7 @@
                       'is-loading': loading
                     }"
                     @click="togglePlay"
-                    ><i class="mdi mdi-18px mdi-radio-tower" />
+                    ><mdicon name="radio-tower" size="16" />
                   </span>
                 </a>
               </div>

web-src/src/components/NavbarItemOutput.vue

@@ -9,11 +9,7 @@
               :class="{ 'has-text-grey-light': !output.selected }"
               @click="set_enabled"
             >
-              <i
+              <mdicon :name="type_class" size="18" :title="output.type" />
-                class="mdi mdi-18px"
-                :class="type_class"
-                :title="output.type"
-              />
             </span>
           </a>
         </div>
@@ -68,13 +64,13 @@ export default {
   computed: {
     type_class() {
       if (this.output.type.startsWith('AirPlay')) {
-        return 'mdi-airplay'
+        return 'cast-variant'
       } else if (this.output.type === 'Chromecast') {
-        return 'mdi-cast'
+        return 'cast'
       } else if (this.output.type === 'fifo') {
-        return 'mdi-pipe'
+        return 'pipe'
       } else {
-        return 'mdi-server'
+        return 'server'
       }
     },
 

web-src/src/components/NavbarTop.vue

@@ -7,25 +7,25 @@
   >
     <div class="navbar-brand">
       <navbar-item-link v-if="is_visible_playlists" to="/playlists">
-        <span class="icon"><i class="mdi mdi-library-music" /></span>
+        <span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_music" to="/music">
-        <span class="icon"><i class="mdi mdi-music" /></span>
+        <span class="icon"><mdicon name="music" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
-        <span class="icon"><i class="mdi mdi-microphone" /></span>
+        <span class="icon"><mdicon name="microphone" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
-        <span class="icon"><i class="mdi mdi-book-open-variant" /></span>
+        <span class="icon"><mdicon name="book-open-variant" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_radio" to="/radio">
-        <span class="icon"><i class="mdi mdi-radio" /></span>
+        <span class="icon"><mdicon name="radio" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_files" to="/files">
-        <span class="icon"><i class="mdi mdi-folder-open" /></span>
+        <span class="icon"><mdicon name="folder-open" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_search" to="/search">
-        <span class="icon"><i class="mdi mdi-magnify" /></span>
+        <span class="icon"><mdicon name="magnify" size="16" /></span>
       </navbar-item-link>
 
       <div
@@ -51,18 +51,20 @@
         >
           <a class="navbar-link is-arrowless">
             <span class="icon is-hidden-touch"
-              ><i class="mdi mdi-24px mdi-menu"
+              ><mdicon name="menu" size="24"
             /></span>
             <span class="is-hidden-desktop has-text-weight-bold">OwnTone</span>
           </a>
 
           <div class="navbar-dropdown is-right">
             <navbar-item-link to="/playlists">
-              <span class="icon"><i class="mdi mdi-library-music" /></span>
+              <span class="icon"
+                ><mdicon name="music-box-multiple" size="16"
+              /></span>
               <b>Playlists</b>
             </navbar-item-link>
             <navbar-item-link to="/music" exact>
-              <span class="icon"><i class="mdi mdi-music" /></span>
+              <span class="icon"><mdicon name="music" size="16" /></span>
               <b>Music</b>
             </navbar-item-link>
             <navbar-item-link to="/music/artists">
@@ -78,23 +80,25 @@
               <span class="fd-navbar-item-level2">Spotify</span>
             </navbar-item-link>
             <navbar-item-link to="/podcasts">
-              <span class="icon"><i class="mdi mdi-microphone" /></span>
+              <span class="icon"><mdicon name="microphone" size="16" /></span>
               <b>Podcasts</b>
             </navbar-item-link>
             <navbar-item-link to="/audiobooks">
-              <span class="icon"><i class="mdi mdi-book-open-variant" /></span>
+              <span class="icon"
+                ><mdicon name="book-open-variant" size="16"
+              /></span>
               <b>Audiobooks</b>
             </navbar-item-link>
             <navbar-item-link to="/radio">
-              <span class="icon"><i class="mdi mdi-radio" /></span>
+              <span class="icon"><mdicon name="radio" size="16" /></span>
               <b>Radio</b>
             </navbar-item-link>
             <navbar-item-link to="/files">
-              <span class="icon"><i class="mdi mdi-folder-open" /></span>
+              <span class="icon"><mdicon name="folder-open" size="16" /></span>
               <b>Files</b>
             </navbar-item-link>
             <navbar-item-link to="/search">
-              <span class="icon"><i class="mdi mdi-magnify" /></span>
+              <span class="icon"><mdicon name="magnify" size="16" /></span>
               <b>Search</b>
             </navbar-item-link>
             <hr class="fd-navbar-divider" />

web-src/src/components/PlayerButtonConsume.vue

@@ -1,6 +1,6 @@
 <template>
   <a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
-    <span class="icon"><i class="mdi mdi-fire" :class="icon_style" /></span>
+    <span class="icon"><mdicon name="fire" :size="icon_size" /></span>
   </a>
 </template>
 
@@ -11,7 +11,10 @@ export default {
   name: 'PlayerButtonConsume',
 
   props: {
-    icon_style: String
+    icon_size: {
+      type: Number,
+      default: 16
+    }
   },
 
   computed: {

web-src/src/components/PlayerButtonNext.vue

@@ -1,8 +1,6 @@
 <template>
   <a :disabled="disabled" @click="play_next">
-    <span class="icon"
+    <span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
-      ><i class="mdi mdi-skip-forward" :class="icon_style"
-    /></span>
   </a>
 </template>
 
@@ -13,7 +11,10 @@ export default {
   name: 'PlayerButtonNext',
 
   props: {
-    icon_style: String
+    icon_size: {
+      type: Number,
+      default: 16
+    }
   },
 
   computed: {

web-src/src/components/PlayerButtonPlayPause.vue

@@ -1,17 +1,6 @@
 <template>
   <a :disabled="disabled" @click="toggle_play_pause">
-    <span class="icon"
+    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
-      ><i
-        class="mdi"
-        :class="[
-          icon_style,
-          {
-            'mdi-play': !is_playing,
-            'mdi-pause': is_playing && is_pause_allowed,
-            'mdi-stop': is_playing && !is_pause_allowed
-          }
-        ]"
-    /></span>
   </a>
 </template>
 
@@ -22,7 +11,10 @@ export default {
   name: 'PlayerButtonPlayPause',
 
   props: {
-    icon_style: String,
+    icon_size: {
+      type: Number,
+      default: 16
+    },
     show_disabled_message: Boolean
   },
 
@@ -40,6 +32,15 @@ export default {
 
     disabled() {
       return !this.$store.state.queue || this.$store.state.queue.count <= 0
+    },
+
+    icon_name() {
+      if (!this.is_playing) {
+        return 'play'
+      } else if (this.is_pause_allowed) {
+        return 'pause'
+      }
+      return 'stop'
     }
   },
 

web-src/src/components/PlayerButtonPrevious.vue

@@ -1,8 +1,6 @@
 <template>
   <a :disabled="disabled" @click="play_previous">
-    <span class="icon"
+    <span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
-      ><i class="mdi mdi-skip-backward" :class="icon_style"
-    /></span>
   </a>
 </template>
 
@@ -13,7 +11,10 @@ export default {
   name: 'PlayerButtonPrevious',
 
   props: {
-    icon_style: String
+    icon_size: {
+      type: Number,
+      default: 16
+    }
   },
 
   computed: {

web-src/src/components/PlayerButtonRepeat.vue

@@ -1,17 +1,6 @@
 <template>
   <a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
-    <span class="icon"
+    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
-      ><i
-        class="mdi"
-        :class="[
-          icon_style,
-          {
-            'mdi-repeat': is_repeat_all,
-            'mdi-repeat-once': is_repeat_single,
-            'mdi-repeat-off': is_repeat_off
-          }
-        ]"
-    /></span>
   </a>
 </template>
 
@@ -22,7 +11,10 @@ export default {
   name: 'PlayerButtonRepeat',
 
   props: {
-    icon_style: String
+    icon_size: {
+      type: Number,
+      default: 16
+    }
   },
 
   computed: {
@@ -34,6 +26,14 @@ export default {
     },
     is_repeat_off() {
       return !this.is_repeat_all && !this.is_repeat_single
+    },
+    icon_name() {
+      if (this.is_repeat_all) {
+        return 'repeat'
+      } else if (this.is_repeat_single) {
+        return 'repeat-once'
+      }
+      return 'repeat-off'
     }
   },
 

web-src/src/components/PlayerButtonSeekBack.vue

@@ -1,6 +1,6 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <span class="icon"><i class="mdi mdi-rewind" :class="icon_style" /></span>
+    <span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
   </a>
 </template>
 
@@ -9,7 +9,13 @@ import webapi from '@/webapi'
 
 export default {
   name: 'PlayerButtonSeekBack',
-  props: ['seek_ms', 'icon_style'],
+  props: {
+    seek_ms: Number,
+    icon_size: {
+      type: Number,
+      default: 16
+    }
+  },
 
   computed: {
     now_playing() {

web-src/src/components/PlayerButtonSeekForward.vue

@@ -1,8 +1,6 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <span class="icon"
+    <span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
-      ><i class="mdi mdi-fast-forward" :class="icon_style"
-    /></span>
   </a>
 </template>
 
@@ -11,7 +9,13 @@ import webapi from '@/webapi'
 
 export default {
   name: 'PlayerButtonSeekForward',
-  props: ['seek_ms', 'icon_style'],
+  props: {
+    seek_ms: Number,
+    icon_size: {
+      type: Number,
+      default: 16
+    }
+  },
 
   computed: {
     now_playing() {

web-src/src/components/PlayerButtonShuffle.vue

@@ -1,13 +1,6 @@
 <template>
   <a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
-    <span class="icon"
+    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
-      ><i
-        class="mdi"
-        :class="[
-          icon_style,
-          { 'mdi-shuffle': is_shuffle, 'mdi-shuffle-disabled': !is_shuffle }
-        ]"
-    /></span>
   </a>
 </template>
 
@@ -18,12 +11,21 @@ export default {
   name: 'PlayerButtonShuffle',
 
   props: {
-    icon_style: String
+    icon_size: {
+      type: Number,
+      default: 16
+    }
   },
 
   computed: {
     is_shuffle() {
       return this.$store.state.player.shuffle
+    },
+    icon_name() {
+      if (this.is_shuffle) {
+        return 'shuffle'
+      }
+      return 'shuffle-disabled'
     }
   },
 

web-src/src/components/SpotifyModalDialogAlbum.vue

@@ -43,15 +43,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/SpotifyModalDialogArtist.vue

@@ -27,15 +27,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/SpotifyModalDialogPlaylist.vue

@@ -30,15 +30,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/SpotifyModalDialogTrack.vue

@@ -51,15 +51,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"><i class="mdi mdi-playlist-plus" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7">Add</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"><i class="mdi mdi-playlist-play" /></span>
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7">Add Next</span>
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><i class="mdi mdi-play" /></span>
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7">Play</span>
               </a>
             </footer>

web-src/src/components/TabsAudiobooks.vue

@@ -13,7 +13,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-artist"
+                      ><mdicon name="account-music" size="16"
                     /></span>
                     <span class="">Authors</span>
                   </a>
@@ -27,7 +27,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-album"
+                      ><mdicon name="album" size="16"
                     /></span>
                     <span class="">Audiobooks</span>
                   </a>

web-src/src/components/TabsMusic.vue

@@ -12,7 +12,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"><i class="mdi mdi-web" /></span>
+                    <span class="icon is-small"
+                      ><mdicon name="web" size="16"
+                    /></span>
                     <span class="">Browse</span>
                   </a>
                 </li>
@@ -25,7 +27,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-artist"
+                      ><mdicon name="account-music" size="16"
                     /></span>
                     <span class="">Artists</span>
                   </a>
@@ -39,7 +41,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-album"
+                      ><mdicon name="album" size="16"
                     /></span>
                     <span class="">Albums</span>
                   </a>
@@ -53,7 +55,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-speaker"
+                      ><mdicon name="speaker" size="16"
                     /></span>
                     <span class="">Genres</span>
                   </a>
@@ -67,7 +69,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-book-open-page-variant"
+                      ><mdicon name="book-open-page-variant" size="16"
                     /></span>
                     <span class="">Composers</span>
                   </a>
@@ -82,7 +84,7 @@
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
                     <span class="icon is-small"
-                      ><i class="mdi mdi-spotify"
+                      ><mdicon name="spotify" size="16"
                     /></span>
                     <span class="">Spotify</span>
                   </a>

web-src/src/components/TabsSearch.vue

@@ -5,18 +5,26 @@
         <div class="column is-four-fifths">
           <div class="tabs is-centered is-small is-toggle is-toggle-rounded">
             <ul>
-              <li :class="{ 'is-active': $store.state.search_path === '/search/library' }">
+              <li
+                :class="{
+                  'is-active': $store.state.search_path === '/search/library'
+                }"
+              >
                 <a @click="search_library">
                   <span class="icon is-small"
-                    ><i class="mdi mdi-library-books"
+                    ><mdicon name="bookshelf" size="16"
                   /></span>
                   <span class="">Library</span>
                 </a>
               </li>
-              <li :class="{ 'is-active': $store.state.search_path === '/search/spotify' }">
+              <li
+                :class="{
+                  'is-active': $store.state.search_path === '/search/spotify'
+                }"
+              >
                 <a @click="search_spotify">
                   <span class="icon is-small"
-                    ><i class="mdi mdi-spotify"
+                    ><mdicon name="spotify" size="16"
                   /></span>
                   <span class="">Spotify</span>
                 </a>

web-src/src/icons.js

@@ -0,0 +1,117 @@
+import {
+  mdiAccountMusic,
+  mdiAlbum,
+  mdiArrowCollapseDown,
+  mdiBookOpenVariant,
+  mdiBookOpenPageVariant,
+  mdiBookshelf,
+  mdiCancel,
+  mdiCast,
+  mdiCastVariant,
+  mdiCellphone,
+  mdiCheck,
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiContentSave,
+  mdiDelete,
+  mdiDeleteEmpty,
+  mdiDotsHorizontal,
+  mdiDotsVertical,
+  mdiDragHorizontal,
+  mdiFastForward,
+  mdiFileMusic,
+  mdiFileOutline,
+  mdiFire,
+  mdiFolder,
+  mdiFolderOpen,
+  mdiMagnify,
+  mdiMenu,
+  mdiMicrophone,
+  mdiMusic,
+  mdiMusicBoxMultiple,
+  mdiPause,
+  mdiPencil,
+  mdiPipe,
+  mdiPlay,
+  mdiPlaylistPlay,
+  mdiPlaylistPlus,
+  mdiRadio,
+  mdiRadioTower,
+  mdiRefresh,
+  mdiRepeat,
+  mdiRepeatOff,
+  mdiRepeatOnce,
+  mdiRewind,
+  mdiRss,
+  mdiServer,
+  mdiShuffle,
+  mdiShuffleDisabled,
+  mdiSkipBackward,
+  mdiSkipForward,
+  mdiSpeaker,
+  mdiSpotify,
+  mdiStop,
+  mdiSubdirectoryArrowLeft,
+  mdiVolumeHigh,
+  mdiVolumeOff,
+  mdiWeb
+} from '@mdi/js'
+
+export const icons = {
+  mdiAccountMusic,
+  mdiAlbum,
+  mdiArrowCollapseDown,
+  mdiBookOpenVariant,
+  mdiBookOpenPageVariant,
+  mdiBookshelf,
+  mdiCancel,
+  mdiCast,
+  mdiCastVariant,
+  mdiCellphone,
+  mdiCheck,
+  mdiChevronDown,
+  mdiChevronUp,
+  mdiContentSave,
+  mdiDelete,
+  mdiDeleteEmpty,
+  mdiDotsHorizontal,
+  mdiDotsVertical,
+  mdiDragHorizontal,
+  mdiFastForward,
+  mdiFileMusic,
+  mdiFileOutline,
+  mdiFire,
+  mdiFolder,
+  mdiFolderOpen,
+  mdiMagnify,
+  mdiMenu,
+  mdiMicrophone,
+  mdiMusic,
+  mdiMusicBoxMultiple,
+  mdiPause,
+  mdiPencil,
+  mdiPipe,
+  mdiPlay,
+  mdiPlaylistPlay,
+  mdiPlaylistPlus,
+  mdiRadio,
+  mdiRadioTower,
+  mdiRefresh,
+  mdiRepeat,
+  mdiRepeatOff,
+  mdiRepeatOnce,
+  mdiRewind,
+  mdiRss,
+  mdiServer,
+  mdiShuffle,
+  mdiShuffleDisabled,
+  mdiSkipBackward,
+  mdiSkipForward,
+  mdiSpeaker,
+  mdiSpotify,
+  mdiStop,
+  mdiSubdirectoryArrowLeft,
+  mdiVolumeHigh,
+  mdiVolumeOff,
+  mdiWeb
+}

web-src/src/main copy.js

@@ -1,31 +0,0 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import { router } from './router'
-import store from './store'
-import './filter'
-import './progress'
-import vClickOutside from 'v-click-outside'
-import VueTinyLazyloadImg from 'vue-tiny-lazyload-img'
-import VueObserveVisibility from 'vue-observe-visibility'
-import VueScrollTo from 'vue-scrollto'
-import 'mdi/css/materialdesignicons.css'
-import 'vue-range-slider/dist/vue-range-slider.css'
-import './mystyles.scss'
-
-Vue.config.productionTip = false
-
-Vue.use(vClickOutside)
-Vue.use(VueTinyLazyloadImg)
-Vue.use(VueObserveVisibility)
-Vue.use(VueScrollTo)
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  store,
-  components: { App },
-  template: '<App/>'
-})

web-src/src/main.js

@@ -5,11 +5,12 @@ import VueProgressBar from '@aacassandra/vue3-progressbar'
 import VueClickAway from 'vue3-click-away'
 import VueLazyLoad from 'vue3-lazyload'
 import VueScrollTo from 'vue-scrollto'
+import mdiVue from 'mdi-vue/v3'
 import { filters } from './filter'
+import { icons } from './icons'
 import App from './App.vue'
 
 import './mystyles.scss'
-import 'mdi/css/materialdesignicons.css'
 import '@vueform/slider/themes/default.css'
 
 const app = createApp(App)
@@ -26,6 +27,9 @@ const app = createApp(App)
     log: false
   })
   .use(VueScrollTo)
+  .use(mdiVue, {
+    icons: icons
+  })
 
 app.config.globalProperties.$filters = filters
 app.mount('#app')

web-src/src/pages/PageAlbum.vue

@@ -10,16 +10,14 @@
 
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-shuffle" /></span>
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span>Shuffle</span>
         </a>
         <a
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
       </div>
     </template>

web-src/src/pages/PageArtist.vue

@@ -22,12 +22,10 @@
           class="button is-small is-light is-rounded"
           @click="show_artist_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-shuffle" /></span>
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span>Shuffle</span>
         </a>
       </div>

web-src/src/pages/PageArtistTracks.vue

@@ -16,11 +16,11 @@
             @click="show_artist_details_modal = true"
           >
             <span class="icon"
-              ><i class="mdi mdi-dots-horizontal mdi-18px"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><i class="mdi mdi-shuffle" /></span>
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span>Shuffle</span>
           </a>
         </div>

web-src/src/pages/PageAudiobooksAlbum.vue

@@ -10,16 +10,14 @@
 
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-play" /></span>
+          <span class="icon"><mdicon name="play" size="16" /></span>
           <span>Play</span>
         </a>
         <a
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
       </div>
     </template>

web-src/src/pages/PageAudiobooksArtist.vue

@@ -11,12 +11,10 @@
           class="button is-small is-light is-rounded"
           @click="show_artist_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-play" /></span>
+          <span class="icon"><mdicon name="play" size="16" /></span>
           <span>Shuffle</span>
         </a>
       </div>

web-src/src/pages/PageComposer.vue

@@ -13,11 +13,11 @@
             @click="show_composer_details_modal = true"
           >
             <span class="icon"
-              ><i class="mdi mdi-dots-horizontal mdi-18px"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><i class="mdi mdi-shuffle" /></span>
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span>Shuffle</span>
           </a>
         </div>

web-src/src/pages/PageComposerTracks.vue

@@ -13,11 +13,11 @@
             @click="show_composer_details_modal = true"
           >
             <span class="icon"
-              ><i class="mdi mdi-dots-horizontal mdi-18px"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><i class="mdi mdi-shuffle" /></span>
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span>Shuffle</span>
           </a>
         </div>

web-src/src/pages/PageFiles.vue

@@ -14,11 +14,11 @@
             @click="open_directory_dialog({ path: current_directory })"
           >
             <span class="icon"
-              ><i class="mdi mdi-dots-horizontal mdi-18px"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><i class="mdi mdi-play" /></span>
+            <span class="icon"><mdicon name="play" size="16" /></span>
             <span>Play</span>
           </a>
         </div>

web-src/src/pages/PageGenre.vue

@@ -16,11 +16,11 @@
             @click="show_genre_details_modal = true"
           >
             <span class="icon"
-              ><i class="mdi mdi-dots-horizontal mdi-18px"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><i class="mdi mdi-shuffle" /></span>
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span>Shuffle</span>
           </a>
         </div>

web-src/src/pages/PageGenreTracks.vue

@@ -16,11 +16,11 @@
             @click="show_genre_details_modal = true"
           >
             <span class="icon"
-              ><i class="mdi mdi-dots-horizontal mdi-18px"
+              ><mdicon name="dots-horizontal" size="16"
             /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><i class="mdi mdi-shuffle" /></span>
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span>Shuffle</span>
           </a>
         </div>

web-src/src/pages/PagePlaylist.vue

@@ -11,12 +11,10 @@
           class="button is-small is-light is-rounded"
           @click="show_playlist_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-shuffle" /></span>
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span>Shuffle</span>
         </a>
       </div>

web-src/src/pages/PagePodcast.vue

@@ -11,13 +11,11 @@
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
           <span class="icon">
-            <i class="mdi mdi-play" />
+            <mdicon name="play" size="16" />
           </span>
           <span>Play</span>
         </a>

web-src/src/pages/PagePodcasts.vue

@@ -8,7 +8,7 @@
         <div class="buttons is-centered">
           <a class="button is-small" @click="mark_all_played">
             <span class="icon">
-              <i class="mdi mdi-pencil" />
+              <mdicon name="pencil" size="16" />
             </span>
             <span>Mark All Played</span>
           </a>
@@ -32,13 +32,13 @@
         <div class="buttons is-centered">
           <a v-if="rss.tracks > 0" class="button is-small" @click="update_rss">
             <span class="icon">
-              <i class="mdi mdi-refresh" />
+              <mdicon name="refresh" size="16" />
             </span>
             <span>Update</span>
           </a>
           <a class="button is-small" @click="open_add_podcast_dialog">
             <span class="icon">
-              <i class="mdi mdi-rss" />
+              <mdicon name="rss" size="16" />
             </span>
             <span>Add Podcast</span>
           </a>

web-src/src/pages/PageQueue.vue

@@ -12,13 +12,13 @@
           @click="update_show_next_items"
         >
           <span class="icon">
-            <i class="mdi mdi-arrow-collapse-down" />
+            <mdicon name="arrow-collapse-down" size="16" />
           </span>
           <span>Hide previous</span>
         </a>
         <a class="button is-small" @click="open_add_stream_dialog">
           <span class="icon">
-            <i class="mdi mdi-web" />
+            <mdicon name="web" size="16" />
           </span>
           <span>Add Stream</span>
         </a>
@@ -28,13 +28,13 @@
           @click="edit_mode = !edit_mode"
         >
           <span class="icon">
-            <i class="mdi mdi-pencil" />
+            <mdicon name="pencil" size="16" />
           </span>
           <span>Edit</span>
         </a>
         <a class="button is-small" @click="queue_clear">
           <span class="icon">
-            <i class="mdi mdi-delete-empty" />
+            <mdicon name="delete-empty" size="16" />
           </span>
           <span>Clear</span>
         </a>
@@ -45,7 +45,7 @@
           @click="save_dialog"
         >
           <span class="icon">
-            <i class="mdi mdi-content-save" />
+            <mdicon name="content-save" size="16" />
           </span>
           <span>Save</span>
         </a>
@@ -69,7 +69,7 @@
             <template #actions>
               <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
                 <span class="icon has-text-dark"
-                  ><i class="mdi mdi-dots-vertical mdi-18px"
+                  ><mdicon name="dots-vertical" size="16"
                 /></span>
               </a>
               <a
@@ -77,7 +77,7 @@
                 @click.prevent.stop="remove(element)"
               >
                 <span class="icon has-text-grey"
-                  ><i class="mdi mdi-delete mdi-18px"
+                  ><mdicon name="delete" size="18"
                 /></span>
               </a>
             </template>

web-src/src/pages/PageSearch.vue

@@ -17,7 +17,7 @@
                     autocomplete="off"
                   />
                   <span class="icon is-left">
-                    <i class="mdi mdi-magnify" />
+                    <mdicon name="magnify" size="16" />
                   </span>
                 </p>
                 <p class="help has-text-centered">

web-src/src/pages/SpotifyPageAlbum.vue

@@ -12,16 +12,14 @@
 
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-shuffle" /></span>
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span>Shuffle</span>
         </a>
         <a
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
       </div>
     </template>
@@ -52,7 +50,7 @@
         <template #actions>
           <a @click.prevent.stop="open_track_dialog(track)">
             <span class="icon has-text-dark"
-              ><i class="mdi mdi-dots-vertical mdi-18px"
+              ><mdicon name="dots-vertical" size="16"
             /></span>
           </a>
         </template>

web-src/src/pages/SpotifyPageArtist.vue

@@ -11,12 +11,10 @@
           class="button is-small is-light is-rounded"
           @click="show_artist_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-shuffle" /></span>
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span>Shuffle</span>
         </a>
       </div>
@@ -43,7 +41,7 @@
         <template #actions>
           <a @click.prevent.stop="open_dialog(album)">
             <span class="icon has-text-dark"
-              ><i class="mdi mdi-dots-vertical mdi-18px"
+              ><mdicon name="dots-vertical" size="16"
             /></span>
           </a>
         </template>

web-src/src/pages/SpotifyPageBrowse.vue

@@ -28,7 +28,7 @@
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>
@@ -67,7 +67,7 @@
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>

web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue

@@ -15,7 +15,7 @@
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>

web-src/src/pages/SpotifyPageBrowseNewReleases.vue

@@ -27,7 +27,7 @@
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>

web-src/src/pages/SpotifyPagePlaylist.vue

@@ -11,12 +11,10 @@
           class="button is-small is-light is-rounded"
           @click="show_playlist_details_modal = true"
         >
-          <span class="icon"
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <span class="icon"><i class="mdi mdi-shuffle" /></span>
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span>Shuffle</span>
         </a>
       </div>
@@ -36,7 +34,7 @@
         <template #actions>
           <a @click.prevent.stop="open_track_dialog(item.track)">
             <span class="icon has-text-dark"
-              ><i class="mdi mdi-dots-vertical mdi-18px"
+              ><mdicon name="dots-vertical" size="16"
             /></span>
           </a>
         </template>

web-src/src/pages/SpotifyPageSearch.vue

@@ -17,7 +17,7 @@
                     autocomplete="off"
                   />
                   <span class="icon is-left">
-                    <i class="mdi mdi-magnify" />
+                    <mdicon name="magnify" size="16" />
                   </span>
                 </p>
               </div>
@@ -55,7 +55,7 @@
           <template #actions>
             <a @click.prevent.stop="open_track_dialog(track)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>
@@ -105,7 +105,7 @@
           <template #actions>
             <a @click.prevent.stop="open_artist_dialog(artist)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>
@@ -166,7 +166,7 @@
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>
@@ -215,7 +215,7 @@
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
               <span class="icon has-text-dark"
-                ><i class="mdi mdi-dots-vertical mdi-18px"
+                ><mdicon name="dots-vertical" size="16"
               /></span>
             </a>
           </template>

web-src/src/templates/ContentWithHeading.vue

@@ -15,14 +15,14 @@
                 class="button is-small is-white"
                 @click="scroll_to_top"
                 ><span class="icon is-small"
-                  ><i class="mdi mdi-chevron-up" /></span
+                  ><mdicon name="chevron-up" size="16" /></span
               ></a>
               <a
                 v-else
                 class="button is-small is-white"
                 @click="scroll_to_content"
                 ><span class="icon is-small"
-                  ><i class="mdi mdi-chevron-down" /></span
+                  ><mdicon name="chevron-down" size="16" /></span
               ></a>
             </nav>
           </section>