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

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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><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/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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><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>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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><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/PagePodcast.vue

@@ -11,13 +11,11 @@
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <span class="icon"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><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" />
+            <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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><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>
@@ -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"
-            ><i class="mdi mdi-dots-horizontal mdi-18px"
-          /></span>
+          <span class="icon"><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>
@@ -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>