From 58c6b2891c35319fada809e5a84978cae686d426 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Wed, 15 Jun 2022 19:24:51 +0200
Subject: [PATCH] [web] Revert icon changes (fixes ignored size attribute)

---
 web-src/src/components/DropdownMenu.vue       |  2 +-
 web-src/src/components/ListAlbums.vue         |  4 +-
 web-src/src/components/ListArtists.vue        |  4 +-
 web-src/src/components/ListComposers.vue      |  4 +-
 web-src/src/components/ListDirectories.vue    | 10 ++-
 web-src/src/components/ListGenres.vue         |  4 +-
 web-src/src/components/ListItemQueueItem.vue  |  8 +-
 web-src/src/components/ListPlaylists.vue      |  8 +-
 web-src/src/components/ListTracks.vue         |  6 +-
 web-src/src/components/ModalDialog.vue        |  6 +-
 web-src/src/components/ModalDialogAddRss.vue  | 12 ++-
 .../components/ModalDialogAddUrlStream.vue    | 14 ++--
 web-src/src/components/ModalDialogAlbum.vue   | 10 ++-
 web-src/src/components/ModalDialogArtist.vue  | 10 ++-
 .../src/components/ModalDialogComposer.vue    | 10 ++-
 .../src/components/ModalDialogDirectory.vue   | 10 ++-
 web-src/src/components/ModalDialogGenre.vue   | 10 ++-
 .../src/components/ModalDialogPlaylist.vue    | 10 ++-
 .../components/ModalDialogPlaylistSave.vue    | 12 ++-
 .../src/components/ModalDialogQueueItem.vue   |  4 +-
 .../components/ModalDialogRemotePairing.vue   |  4 +-
 web-src/src/components/ModalDialogTrack.vue   | 10 ++-
 web-src/src/components/NavbarBottom.vue       | 79 +++++++++----------
 web-src/src/components/NavbarItemOutput.vue   |  5 +-
 web-src/src/components/NavbarTop.vue          | 36 +++++----
 .../src/components/PlayerButtonConsume.vue    |  2 +-
 web-src/src/components/PlayerButtonNext.vue   |  2 +-
 .../src/components/PlayerButtonPlayPause.vue  |  2 +-
 .../src/components/PlayerButtonPrevious.vue   |  2 +-
 web-src/src/components/PlayerButtonRepeat.vue |  2 +-
 .../src/components/PlayerButtonSeekBack.vue   |  2 +-
 .../components/PlayerButtonSeekForward.vue    |  2 +-
 .../src/components/PlayerButtonShuffle.vue    |  2 +-
 .../components/SpotifyModalDialogAlbum.vue    | 10 ++-
 .../components/SpotifyModalDialogArtist.vue   | 10 ++-
 .../components/SpotifyModalDialogPlaylist.vue | 10 ++-
 .../components/SpotifyModalDialogTrack.vue    | 10 ++-
 web-src/src/components/TabsAudiobooks.vue     | 12 +--
 web-src/src/components/TabsMusic.vue          | 32 ++++----
 web-src/src/components/TabsSearch.vue         |  8 +-
 web-src/src/icons.js                          |  6 +-
 web-src/src/pages/PageAlbum.vue               |  4 +-
 web-src/src/pages/PageArtist.vue              |  4 +-
 web-src/src/pages/PageArtistTracks.vue        |  6 +-
 web-src/src/pages/PageAudiobooksAlbum.vue     |  4 +-
 web-src/src/pages/PageAudiobooksArtist.vue    |  4 +-
 web-src/src/pages/PageComposer.vue            |  6 +-
 web-src/src/pages/PageComposerTracks.vue      |  6 +-
 web-src/src/pages/PageFiles.vue               |  6 +-
 web-src/src/pages/PageGenre.vue               |  6 +-
 web-src/src/pages/PageGenreTracks.vue         |  6 +-
 web-src/src/pages/PagePlaylist.vue            |  4 +-
 web-src/src/pages/PagePodcast.vue             |  4 +-
 web-src/src/pages/PagePodcasts.vue            |  6 +-
 web-src/src/pages/PageQueue.vue               | 24 +++---
 web-src/src/pages/PageSearch.vue              |  4 +-
 web-src/src/pages/SettingsPageArtwork.vue     |  6 +-
 web-src/src/pages/SpotifyPageAlbum.vue        |  8 +-
 web-src/src/pages/SpotifyPageArtist.vue       |  8 +-
 web-src/src/pages/SpotifyPageBrowse.vue       | 16 ++--
 .../SpotifyPageBrowseFeaturedPlaylists.vue    |  8 +-
 .../pages/SpotifyPageBrowseNewReleases.vue    |  8 +-
 web-src/src/pages/SpotifyPagePlaylist.vue     |  8 +-
 web-src/src/pages/SpotifyPageSearch.vue       | 36 ++++-----
 web-src/src/templates/ContentWithHeading.vue  |  8 +-
 65 files changed, 350 insertions(+), 256 deletions(-)

diff --git a/web-src/src/components/DropdownMenu.vue b/web-src/src/components/DropdownMenu.vue
index ed28aa1e..82ea4624 100644
--- a/web-src/src/components/DropdownMenu.vue
+++ b/web-src/src/components/DropdownMenu.vue
@@ -12,7 +12,7 @@
         @click="is_active = !is_active"
       >
         <span v-text="option.name" />
-        <mdicon class="icon" name="chevron-down" size="16" />
+        <span class="icon"><mdicon name="chevron-down" size="16" /></span>
       </button>
     </div>
     <div id="dropdown-menu" class="dropdown-menu" role="menu">
diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index ce1bd53a..460a8ca8 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -38,7 +38,9 @@
       </div>
       <div class="media-right" style="padding-top: 0.7rem">
         <a @click.prevent.stop="open_dialog(album.item)">
-          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+          <span class="icon has-text-dark"
+            ><mdicon name="dots-vertical" size="16"
+          /></span>
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index 36921d88..9a3a0964 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -19,7 +19,9 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(artist.item)">
-          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+          <span class="icon has-text-dark"
+            ><mdicon name="dots-vertical" size="16"
+          /></span>
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index c4c5c8c1..4479f374 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -19,7 +19,9 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(composer.item)">
-          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+          <span class="icon has-text-dark"
+            ><mdicon name="dots-vertical" size="16"
+          /></span>
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index d21a940d..b2e33905 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -5,7 +5,9 @@
     @click="open_parent_directory()"
   >
     <figure class="media-left fd-has-action">
-      <mdicon class="icon" name="subdirectory-arrow-left" size="16" />
+      <span class="icon"
+        ><mdicon name="subdirectory-arrow-left" size="16"
+      /></span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
       <h1 class="title is-6">..</h1>
@@ -17,7 +19,7 @@
   <template v-for="directory in directories" :key="directory.path">
     <div class="media" @click="open_directory(directory)">
       <figure class="media-left fd-has-action">
-        <mdicon class="icon" name="folder" size="16" />
+        <span class="icon"><mdicon name="folder" size="16" /></span>
       </figure>
       <div class="media-content fd-has-action is-clipped">
         <h1
@@ -28,7 +30,9 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(directory)">
-          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+          <span class="icon has-text-dark"
+            ><mdicon name="dots-vertical" size="16"
+          /></span>
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index a7fab03d..196f29c4 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -15,7 +15,9 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(genre.item)">
-          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+          <span class="icon has-text-dark"
+            ><mdicon name="dots-vertical" size="16"
+          /></span>
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index 226d5e25..05fbb2e7 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -1,11 +1,9 @@
 <template>
   <div v-if="is_next || !show_only_next_items" class="media">
     <div v-if="edit_mode" class="media-left">
-      <mdicon
-        class="icon has-text-grey fd-is-movable handle"
-        name="drag-horizontal"
-        size="16"
-      />
+      <span class="icon has-text-grey fd-is-movable handle"
+        ><mdicon name="drag-horizontal" size="16"
+      /></span>
     </div>
     <div class="media-content fd-has-action is-clipped" @click="play">
       <h1
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index 5b265749..4f127662 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -7,14 +7,18 @@
     @click="open_playlist(playlist.item)"
   >
     <figure class="media-left fd-has-action">
-      <mdicon class="icon" :name="icon_name(playlist.item)" size="16" />
+      <span class="icon"
+        ><mdicon :name="icon_name(playlist.item)" size="16"
+      /></span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
       <h1 class="title is-6" v-text="playlist.item.name" />
     </div>
     <div class="media-right">
       <a @click.prevent.stop="open_dialog(playlist.item)">
-        <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+        <span class="icon has-text-dark"
+          ><mdicon name="dots-vertical" size="16"
+        /></span>
       </a>
     </div>
   </div>
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index ee64ec33..974aa9db 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -8,7 +8,7 @@
     @click="play_track(index, track)"
   >
     <figure v-if="show_icon" class="media-left fd-has-action">
-      <mdicon class="icon" name="file-outline" size="16" />
+      <span class="icon"><mdicon name="file-outline" size="16" /></span>
     </figure>
     <div class="media-content fd-has-action is-clipped">
       <h1
@@ -29,7 +29,9 @@
     </div>
     <div class="media-right">
       <a @click.prevent.stop="open_dialog(track)">
-        <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+        <span class="icon has-text-dark"
+          ><mdicon name="dots-vertical" size="16"
+        /></span>
       </a>
     </div>
   </div>
diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index f0501e51..7c62af49 100644
--- a/web-src/src/components/ModalDialog.vue
+++ b/web-src/src/components/ModalDialog.vue
@@ -11,7 +11,7 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="$emit('close')">
-                <mdicon class="icon" name="cancel" size="16" />
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="close_action ? close_action : t('dialog.cancel')"
@@ -22,7 +22,7 @@
                 class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
                 @click="$emit('delete')"
               >
-                <mdicon class="icon" name="delete" size="16" />
+                <span class="icon"><mdicon name="delete" size="16" /></span>
                 <span class="is-size-7" v-text="delete_action" />
               </a>
               <a
@@ -30,7 +30,7 @@
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="$emit('ok')"
               >
-                <mdicon class="icon" name="check" size="16" />
+                <span class="icon"><mdicon name="check" size="16" /></span>
                 <span class="is-size-7" v-text="ok_action" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogAddRss.vue b/web-src/src/components/ModalDialogAddRss.vue
index 79ee60ea..ef1ba239 100644
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -18,7 +18,9 @@
                       :placeholder="$t('dialog.add.rss.placeholder')"
                       :disabled="loading"
                     />
-                    <mdicon class="icon is-left" name="rss" size="16" />
+                    <span class="icon is-left"
+                      ><mdicon name="rss" size="16"
+                    /></span>
                   </p>
                   <p class="help" v-text="$t('dialog.add.rss.help')" />
                 </div>
@@ -26,7 +28,7 @@
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item button is-loading">
-                <mdicon class="icon" name="web" size="16" />
+                <span class="icon"><mdicon name="web" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.add.rss.processing')"
@@ -38,14 +40,16 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <mdicon class="icon" name="cancel" size="16" />
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
               </a>
               <a
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="add_stream"
               >
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogAddUrlStream.vue b/web-src/src/components/ModalDialogAddUrlStream.vue
index 263708df..3846ce8b 100644
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@@ -18,14 +18,16 @@
                       :placeholder="$t('dialog.add.stream.placeholder')"
                       :disabled="loading"
                     />
-                    <mdicon class="icon is-left" name="web" size="16" />
+                    <span class="icon is-left"
+                      ><mdicon name="web" size="16"
+                    /></span>
                   </p>
                 </div>
               </form>
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
-                <mdicon class="icon" name="web" size="16" />
+                <span class="icon"><mdicon name="web" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.add.stream.loading')"
@@ -37,21 +39,23 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <mdicon class="icon" name="cancel" size="16" />
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.add.stream.cancel')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="add_stream">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
               </a>
               <a
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="play"
               >
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 71960af8..c84b1eff 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -88,15 +88,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.album.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.album.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.album.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue
index df58cfac..bbfb238d 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -40,15 +40,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.artist.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.artist.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogComposer.vue b/web-src/src/components/ModalDialogComposer.vue
index 121fd7ea..db70b22a 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -39,18 +39,22 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.composer.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.composer.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.composer.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogDirectory.vue b/web-src/src/components/ModalDialogDirectory.vue
index ebf3c3a7..13896179 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -10,18 +10,22 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.directory.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.directory.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.directory.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogGenre.vue b/web-src/src/components/ModalDialogGenre.vue
index e03c2523..c52904d7 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -33,15 +33,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.genre.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.genre.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogPlaylist.vue b/web-src/src/components/ModalDialogPlaylist.vue
index e02df01e..6eb55704 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -33,18 +33,22 @@
             </div>
             <footer v-if="!playlist.folder" class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.playlist.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogPlaylistSave.vue b/web-src/src/components/ModalDialogPlaylistSave.vue
index e3853c38..a89e404b 100644
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -18,14 +18,16 @@
                       placeholder="Playlist name"
                       :disabled="loading"
                     />
-                    <mdicon class="icon is-left" name="file-music" size="16" />
+                    <span class="icon is-left"
+                      ><mdicon name="file-music" size="16"
+                    /></span>
                   </p>
                 </div>
               </form>
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
-                <mdicon class="icon" name="web" size="16" />
+                <span class="icon"><mdicon name="web" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.save.saving')"
@@ -37,7 +39,7 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <mdicon class="icon" name="cancel" size="16" />
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.save.cancel')"
@@ -47,7 +49,9 @@
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="save"
               >
-                <mdicon class="icon" name="content-save" size="16" />
+                <span class="icon"
+                  ><mdicon name="content-save" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.save.save')"
diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue
index 8816a0ad..ceb9aaa8 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -137,14 +137,14 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="remove">
-                <mdicon class="icon" name="delete" size="16" />
+                <span class="icon"><mdicon name="delete" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.queue-item.remove')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/ModalDialogRemotePairing.vue b/web-src/src/components/ModalDialogRemotePairing.vue
index f5c1972c..494137f8 100644
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@@ -30,7 +30,7 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <mdicon class="icon" name="cancel" size="16" />
+                <span class="icon"><mdicon name="cancel" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.remote-pairing.cancel')"
@@ -40,7 +40,7 @@
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="kickoff_pairing"
               >
-                <mdicon class="icon" name="cellphone" size="16" />
+                <span class="icon"><mdicon name="cellphone" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.remote-pairing.pair')"
diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue
index 9e15c7f3..5a1dc336 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -168,15 +168,19 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.track.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span class="is-size-7" v-text="$t('dialog.track.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play_track">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span class="is-size-7" v-text="$t('dialog.track.play')" />
               </a>
             </footer>
diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index 808a95a7..b91ce6e1 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -12,7 +12,7 @@
     <div class="navbar-brand fd-expanded">
       <!-- Link to queue -->
       <navbar-item-link to="/" exact>
-        <mdicon class="icon" name="playlist-play" size="24" />
+        <span class="icon"><mdicon name="playlist-play" size="24" /></span>
       </navbar-item-link>
       <!-- Now playing artist/title (not visible on "now playing" page) -->
       <router-link
@@ -71,11 +71,11 @@
         class="navbar-item fd-margin-left-auto is-hidden-desktop"
         @click="show_player_menu = !show_player_menu"
       >
-        <mdicon
-          class="icon"
-          :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
-          size="18"
-        />
+        <span class="icon"
+          ><mdicon
+            :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
+            size="18"
+        /></span>
       </a>
       <!-- Player menu dropup menu (only visible on desktop) -->
       <div
@@ -86,11 +86,11 @@
           class="navbar-link is-arrowless"
           @click="show_player_menu = !show_player_menu"
         >
-          <mdicon
-            class="icon"
-            :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
-            size="18"
-          />
+          <span class="icon"
+            ><mdicon
+              :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
+              size="18"
+          /></span>
         </a>
         <div
           class="navbar-dropdown is-right is-boxed"
@@ -105,11 +105,11 @@
                     class="button is-white is-small"
                     @click="toggle_mute_volume"
                   >
-                    <mdicon
-                      class="icon"
-                      :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                      size="18"
-                    />
+                    <span class="icon"
+                      ><mdicon
+                        :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
+                        size="18"
+                    /></span>
                   </a>
                 </div>
                 <div class="level-item fd-expanded">
@@ -145,17 +145,15 @@
                   <a
                     class="button is-white is-small"
                     :class="{ 'is-loading': loading }"
-                  >
-                    <span
+                    ><span
                       class="icon fd-has-action"
                       :class="{
                         'has-text-grey-light': !playing && !loading,
                         'is-loading': loading
                       }"
                       @click="togglePlay"
-                    >
-                      <mdicon name="broadcast" size="18" />
-                    </span>
+                      ><mdicon name="broadcast" size="18"
+                    /></span>
                   </a>
                 </div>
                 <div class="level-item fd-expanded">
@@ -169,13 +167,12 @@
                         href="stream.mp3"
                         style="margin-left: 5px"
                         target="_blank"
-                      >
-                        <mdicon
-                          class="icon"
-                          name="open-in-new"
-                          size="16"
-                          style="vertical-align: middle"
-                        />
+                        ><span class="icon"
+                          ><mdicon
+                            name="open-in-new"
+                            size="16"
+                            style="vertical-align: middle"
+                        /></span>
                       </a>
                     </p>
                     <Slider
@@ -231,11 +228,11 @@
             <div class="level-left fd-expanded">
               <div class="level-item" style="flex-grow: 0">
                 <a class="button is-white is-small" @click="toggle_mute_volume">
-                  <mdicon
-                    class="icon"
-                    :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                    size="18"
-                  />
+                  <span class="icon"
+                    ><mdicon
+                      :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
+                      size="18"
+                  /></span>
                 </a>
               </div>
               <div class="level-item fd-expanded">
@@ -278,8 +275,7 @@
                       'is-loading': loading
                     }"
                     @click="togglePlay"
-                  >
-                    <mdicon name="broadcast" size="16" />
+                    ><mdicon name="radio-tower" size="16" />
                   </span>
                 </a>
               </div>
@@ -294,13 +290,12 @@
                       href="stream.mp3"
                       style="margin-left: 5px"
                       target="_blank"
-                    >
-                      <mdicon
-                        class="icon"
-                        name="open-in-new"
-                        size="16"
-                        style="vertical-align: middle"
-                      />
+                      ><span class="icon"
+                        ><mdicon
+                          name="open-in-new"
+                          size="16"
+                          style="vertical-align: middle"
+                      /></span>
                     </a>
                   </p>
                   <Slider
diff --git a/web-src/src/components/NavbarItemOutput.vue b/web-src/src/components/NavbarItemOutput.vue
index d9706274..76e69982 100644
--- a/web-src/src/components/NavbarItemOutput.vue
+++ b/web-src/src/components/NavbarItemOutput.vue
@@ -8,9 +8,8 @@
               class="icon fd-has-action"
               :class="{ 'has-text-grey-light': !output.selected }"
               @click="set_enabled"
-            >
-              <mdicon :name="type_class" size="18" :title="output.type" />
-            </span>
+              ><mdicon :name="type_class" size="18" :title="output.type"
+            /></span>
           </a>
         </div>
         <div class="level-item fd-expanded">
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index e0af8775..4b80c0c4 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -7,25 +7,25 @@
   >
     <div class="navbar-brand">
       <navbar-item-link v-if="is_visible_playlists" to="/playlists">
-        <mdicon class="icon" name="music-box-multiple" size="16" />
+        <span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_music" to="/music">
-        <mdicon class="icon" name="music" size="16" />
+        <span class="icon"><mdicon name="music" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
-        <mdicon class="icon" name="podcast" size="16" />
+        <span class="icon"><mdicon name="microphone" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
-        <mdicon class="icon" name="book-open-variant" size="16" />
+        <span class="icon"><mdicon name="book-open-variant" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_radio" to="/radio">
-        <mdicon class="icon" name="radio-tower" size="16" />
+        <span class="icon"><mdicon name="radio" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_files" to="/files">
-        <mdicon class="icon" name="folder-open" size="16" />
+        <span class="icon"><mdicon name="folder-open" size="16" /></span>
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_search" to="/search">
-        <mdicon class="icon" name="magnify" size="16" />
+        <span class="icon"><mdicon name="magnify" size="16" /></span>
       </navbar-item-link>
       <div
         class="navbar-burger"
@@ -47,7 +47,9 @@
           @click="on_click_outside_settings"
         >
           <a class="navbar-link is-arrowless">
-            <mdicon class="icon is-hidden-touch" name="menu" size="24" />
+            <span class="icon is-hidden-touch"
+              ><mdicon name="menu" size="24"
+            /></span>
             <span
               class="is-hidden-desktop has-text-weight-bold"
               v-text="$t('navigation.title')"
@@ -55,11 +57,13 @@
           </a>
           <div class="navbar-dropdown is-right">
             <navbar-item-link to="/playlists">
-              <mdicon class="icon" name="music-box-multiple" size="16" />
+              <span class="icon"
+                ><mdicon name="music-box-multiple" size="16"
+              /></span>
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>
             <navbar-item-link to="/music" exact>
-              <mdicon class="icon" name="music" size="16" />
+              <span class="icon"><mdicon name="music" size="16" /></span>
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>
             <navbar-item-link to="/music/artists">
@@ -87,23 +91,25 @@
               />
             </navbar-item-link>
             <navbar-item-link to="/podcasts">
-              <mdicon class="icon" name="podcast" size="16" />
+              <span class="icon"><mdicon name="microphone" size="16" /></span>
               <b v-text="$t('navigation.podcasts')" />
             </navbar-item-link>
             <navbar-item-link to="/audiobooks">
-              <mdicon class="icon" name="book-open-variant" size="16" />
+              <span class="icon"
+                ><mdicon name="book-open-variant" size="16"
+              /></span>
               <b v-text="$t('navigation.audiobooks')" />
             </navbar-item-link>
             <navbar-item-link to="/radio">
-              <mdicon class="icon" name="radio-tower" size="16" />
+              <span class="icon"><mdicon name="radio" size="16" /></span>
               <b v-text="$t('navigation.radio')" />
             </navbar-item-link>
             <navbar-item-link to="/files">
-              <mdicon class="icon" name="folder-open" size="16" />
+              <span class="icon"><mdicon name="folder-open" size="16" /></span>
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
             <navbar-item-link to="/search">
-              <mdicon class="icon" name="magnify" size="16" />
+              <span class="icon"><mdicon name="magnify" size="16" /></span>
               <b v-text="$t('navigation.search')" />
             </navbar-item-link>
             <hr class="fd-navbar-divider" />
diff --git a/web-src/src/components/PlayerButtonConsume.vue b/web-src/src/components/PlayerButtonConsume.vue
index d3dded7a..4b48175a 100644
--- a/web-src/src/components/PlayerButtonConsume.vue
+++ b/web-src/src/components/PlayerButtonConsume.vue
@@ -1,6 +1,6 @@
 <template>
   <a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
-    <mdicon class="icon" name="fire" :size="icon_size" />
+    <span class="icon"><mdicon name="fire" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonNext.vue b/web-src/src/components/PlayerButtonNext.vue
index 52390f68..8682e230 100644
--- a/web-src/src/components/PlayerButtonNext.vue
+++ b/web-src/src/components/PlayerButtonNext.vue
@@ -1,6 +1,6 @@
 <template>
   <a :disabled="disabled" @click="play_next">
-    <mdicon class="icon" name="skip-forward" :size="icon_size" />
+    <span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonPlayPause.vue b/web-src/src/components/PlayerButtonPlayPause.vue
index 39a05160..15618122 100644
--- a/web-src/src/components/PlayerButtonPlayPause.vue
+++ b/web-src/src/components/PlayerButtonPlayPause.vue
@@ -1,6 +1,6 @@
 <template>
   <a :disabled="disabled" @click="toggle_play_pause">
-    <mdicon class="icon" :name="icon_name" :size="icon_size" />
+    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonPrevious.vue b/web-src/src/components/PlayerButtonPrevious.vue
index 8c7232cb..c354976e 100644
--- a/web-src/src/components/PlayerButtonPrevious.vue
+++ b/web-src/src/components/PlayerButtonPrevious.vue
@@ -1,6 +1,6 @@
 <template>
   <a :disabled="disabled" @click="play_previous">
-    <mdicon class="icon" name="skip-backward" :size="icon_size" />
+    <span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonRepeat.vue b/web-src/src/components/PlayerButtonRepeat.vue
index 79ccf45b..1a3e927d 100644
--- a/web-src/src/components/PlayerButtonRepeat.vue
+++ b/web-src/src/components/PlayerButtonRepeat.vue
@@ -1,6 +1,6 @@
 <template>
   <a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
-    <mdicon class="icon" :name="icon_name" :size="icon_size" />
+    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonSeekBack.vue b/web-src/src/components/PlayerButtonSeekBack.vue
index df878544..94f4a256 100644
--- a/web-src/src/components/PlayerButtonSeekBack.vue
+++ b/web-src/src/components/PlayerButtonSeekBack.vue
@@ -1,6 +1,6 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <mdicon class="icon" name="rewind" :size="icon_size" />
+    <span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonSeekForward.vue b/web-src/src/components/PlayerButtonSeekForward.vue
index 2cd57909..54b57e9f 100644
--- a/web-src/src/components/PlayerButtonSeekForward.vue
+++ b/web-src/src/components/PlayerButtonSeekForward.vue
@@ -1,6 +1,6 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <mdicon class="icon" name="fast-forward" :size="icon_size" />
+    <span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonShuffle.vue b/web-src/src/components/PlayerButtonShuffle.vue
index 81e539f2..8392b62d 100644
--- a/web-src/src/components/PlayerButtonShuffle.vue
+++ b/web-src/src/components/PlayerButtonShuffle.vue
@@ -1,6 +1,6 @@
 <template>
   <a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
-    <mdicon class="icon" :name="icon_name" :size="icon_size" />
+    <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
   </a>
 </template>
 
diff --git a/web-src/src/components/SpotifyModalDialogAlbum.vue b/web-src/src/components/SpotifyModalDialogAlbum.vue
index 7a3279b0..6f615a70 100644
--- a/web-src/src/components/SpotifyModalDialogAlbum.vue
+++ b/web-src/src/components/SpotifyModalDialogAlbum.vue
@@ -57,21 +57,25 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.album.add')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.album.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.album.play')"
diff --git a/web-src/src/components/SpotifyModalDialogArtist.vue b/web-src/src/components/SpotifyModalDialogArtist.vue
index 4b534cbc..7c3491b6 100644
--- a/web-src/src/components/SpotifyModalDialogArtist.vue
+++ b/web-src/src/components/SpotifyModalDialogArtist.vue
@@ -37,21 +37,25 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.artist.add')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.artist.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.artist.play')"
diff --git a/web-src/src/components/SpotifyModalDialogPlaylist.vue b/web-src/src/components/SpotifyModalDialogPlaylist.vue
index 48b6b105..fc1dfef0 100644
--- a/web-src/src/components/SpotifyModalDialogPlaylist.vue
+++ b/web-src/src/components/SpotifyModalDialogPlaylist.vue
@@ -42,21 +42,25 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.playlist.add')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.playlist.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.playlist.play')"
diff --git a/web-src/src/components/SpotifyModalDialogTrack.vue b/web-src/src/components/SpotifyModalDialogTrack.vue
index 8dfb45df..e0a76414 100644
--- a/web-src/src/components/SpotifyModalDialogTrack.vue
+++ b/web-src/src/components/SpotifyModalDialogTrack.vue
@@ -72,21 +72,25 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <mdicon class="icon" name="playlist-plus" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-plus" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.track.add')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <mdicon class="icon" name="playlist-play" size="16" />
+                <span class="icon"
+                  ><mdicon name="playlist-play" size="16"
+                /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.track.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <mdicon class="icon" name="play" size="16" />
+                <span class="icon"><mdicon name="play" size="16" /></span>
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.track.play')"
diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
index f2cbec84..e05ebb33 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -12,11 +12,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon
-                      class="icon is-small"
-                      name="account-music"
-                      size="16"
-                    />
+                    <span class="icon is-small"
+                      ><mdicon name="account-music" size="16"
+                    /></span>
                     <span v-text="$t('page.audiobooks.tabs.authors')" />
                   </a>
                 </li>
@@ -28,7 +26,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="album" size="16" />
+                    <span class="icon is-small"
+                      ><mdicon name="album" size="16"
+                    /></span>
                     <span v-text="$t('page.audiobooks.tabs.audiobooks')" />
                   </a>
                 </li>
diff --git a/web-src/src/components/TabsMusic.vue b/web-src/src/components/TabsMusic.vue
index 5de08ede..ac232456 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -12,7 +12,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="web" size="16" />
+                    <span class="icon is-small"
+                      ><mdicon name="web" size="16"
+                    /></span>
                     <span v-text="$t('page.browse.tabs.browse')" />
                   </a>
                 </li>
@@ -24,11 +26,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon
-                      class="icon is-small"
-                      name="account-music"
-                      size="16"
-                    />
+                    <span class="icon is-small"
+                      ><mdicon name="account-music" size="16"
+                    /></span>
                     <span v-text="$t('page.browse.tabs.artists')" />
                   </a>
                 </li>
@@ -40,7 +40,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="album" size="16" />
+                    <span class="icon is-small"
+                      ><mdicon name="album" size="16"
+                    /></span>
                     <span v-text="$t('page.browse.tabs.albums')" />
                   </a>
                 </li>
@@ -52,7 +54,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="speaker" size="16" />
+                    <span class="icon is-small"
+                      ><mdicon name="speaker" size="16"
+                    /></span>
                     <span v-text="$t('page.browse.tabs.genres')" />
                   </a>
                 </li>
@@ -64,11 +68,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon
-                      class="icon is-small"
-                      name="book-open-page-variant"
-                      size="16"
-                    />
+                    <span class="icon is-small"
+                      ><mdicon name="book-open-page-variant" size="16"
+                    /></span>
                     <span v-text="$t('page.browse.tabs.composers')" />
                   </a>
                 </li>
@@ -81,7 +83,9 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <mdicon class="icon is-small" name="spotify" size="16" />
+                    <span class="icon is-small"
+                      ><mdicon name="spotify" size="16"
+                    /></span>
                     <span v-text="$t('page.browse.tabs.spotify')" />
                   </a>
                 </li>
diff --git a/web-src/src/components/TabsSearch.vue b/web-src/src/components/TabsSearch.vue
index 2539b077..45abd70b 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -11,7 +11,9 @@
                 }"
               >
                 <a @click="search_library">
-                  <mdicon class="icon is-small" name="bookshelf" size="16" />
+                  <span class="icon is-small"
+                    ><mdicon name="bookshelf" size="16"
+                  /></span>
                   <span v-text="$t('page.search.tabs.library')" />
                 </a>
               </li>
@@ -21,7 +23,9 @@
                 }"
               >
                 <a @click="search_spotify">
-                  <mdicon class="icon is-small" name="spotify" size="16" />
+                  <span class="icon is-small"
+                    ><mdicon name="spotify" size="16"
+                  /></span>
                   <span v-text="$t('page.search.tabs.spotify')" />
                 </a>
               </li>
diff --git a/web-src/src/icons.js b/web-src/src/icons.js
index 211d5696..46a9bb60 100644
--- a/web-src/src/icons.js
+++ b/web-src/src/icons.js
@@ -27,6 +27,7 @@ import {
   mdiFolderOpen,
   mdiMagnify,
   mdiMenu,
+  mdiMicrophone,
   mdiMusic,
   mdiMusicBoxMultiple,
   mdiOpenInNew,
@@ -36,7 +37,7 @@ import {
   mdiPlay,
   mdiPlaylistPlay,
   mdiPlaylistPlus,
-  mdiPodcast,
+  mdiRadio,
   mdiRadioTower,
   mdiRefresh,
   mdiRepeat,
@@ -87,6 +88,7 @@ export const icons = {
   mdiFolderOpen,
   mdiMagnify,
   mdiMenu,
+  mdiMicrophone,
   mdiMusic,
   mdiMusicBoxMultiple,
   mdiOpenInNew,
@@ -96,7 +98,7 @@ export const icons = {
   mdiPlay,
   mdiPlaylistPlay,
   mdiPlaylistPlus,
-  mdiPodcast,
+  mdiRadio,
   mdiRadioTower,
   mdiRefresh,
   mdiRepeat,
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 88abc622..5a90d245 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -7,14 +7,14 @@
       </h2>
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="shuffle" size="16" />
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span v-text="$t('page.album.shuffle')" />
         </a>
         <a
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
       </div>
     </template>
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index 23fde6e0..c699de23 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -24,10 +24,10 @@
           class="button is-small is-light is-rounded"
           @click="show_artist_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="shuffle" size="16" />
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span v-text="$t('page.artist.shuffle')" />
         </a>
       </div>
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index 2533ca48..037456ac 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -13,10 +13,12 @@
             class="button is-small is-light is-rounded"
             @click="show_artist_details_modal = true"
           >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <mdicon class="icon" name="shuffle" size="16" />
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span v-text="$t('page.artist.shuffle')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index 4db4bf5c..806e5341 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -7,14 +7,14 @@
       </h2>
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="play" size="16" />
+          <span class="icon"><mdicon name="play" size="16" /></span>
           <span v-text="$t('page.audiobooks.album.play')" />
         </a>
         <a
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
       </div>
     </template>
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index 6c0d599e..7393b9bf 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -9,10 +9,10 @@
           class="button is-small is-light is-rounded"
           @click="show_artist_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="play" size="16" />
+          <span class="icon"><mdicon name="play" size="16" /></span>
           <span v-text="$t('page.audiobooks.artist.shuffle')" />
         </a>
       </div>
diff --git a/web-src/src/pages/PageComposer.vue b/web-src/src/pages/PageComposer.vue
index e214ee5b..10305dd8 100644
--- a/web-src/src/pages/PageComposer.vue
+++ b/web-src/src/pages/PageComposer.vue
@@ -10,10 +10,12 @@
             class="button is-small is-light is-rounded"
             @click="show_composer_details_modal = true"
           >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <mdicon class="icon" name="shuffle" size="16" />
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span v-text="$t('page.composer.shuffle')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index df4d7503..71794460 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -10,10 +10,12 @@
             class="button is-small is-light is-rounded"
             @click="show_composer_details_modal = true"
           >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <mdicon class="icon" name="shuffle" size="16" />
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span v-text="$t('page.composer.shuffle')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageFiles.vue b/web-src/src/pages/PageFiles.vue
index ec8272f8..fcf0fc28 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -11,10 +11,12 @@
             class="button is-small is-light is-rounded"
             @click="show_details_modal = true"
           >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <mdicon class="icon" name="play" size="16" />
+            <span class="icon"><mdicon name="play" size="16" /></span>
             <span v-text="$t('page.files.play')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue
index 83503768..a7e91558 100644
--- a/web-src/src/pages/PageGenre.vue
+++ b/web-src/src/pages/PageGenre.vue
@@ -13,10 +13,12 @@
             class="button is-small is-light is-rounded"
             @click="show_genre_details_modal = true"
           >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <mdicon class="icon" name="shuffle" size="16" />
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span v-text="$t('page.genre.shuffle')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index dcf930a0..f8dbd029 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -13,10 +13,12 @@
             class="button is-small is-light is-rounded"
             @click="show_genre_details_modal = true"
           >
-            <mdicon class="icon" name="dots-horizontal" size="16" />
+            <span class="icon"
+              ><mdicon name="dots-horizontal" size="16"
+            /></span>
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <mdicon class="icon" name="shuffle" size="16" />
+            <span class="icon"><mdicon name="shuffle" size="16" /></span>
             <span v-text="$t('page.genre.shuffle')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylist.vue
index bdafcb4c..d92402a4 100644
--- a/web-src/src/pages/PagePlaylist.vue
+++ b/web-src/src/pages/PagePlaylist.vue
@@ -9,10 +9,10 @@
           class="button is-small is-light is-rounded"
           @click="show_playlist_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="shuffle" size="16" />
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span v-text="$t('page.playlist.shuffle')" />
         </a>
       </div>
diff --git a/web-src/src/pages/PagePodcast.vue b/web-src/src/pages/PagePodcast.vue
index a88bd33f..1b7127f0 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -9,10 +9,10 @@
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="play" size="16" />
+          <span class="icon"><mdicon name="play" size="16" /></span>
           <span v-text="$t('page.podcast.play')" />
         </a>
       </div>
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 609bb466..1a8a1e2b 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -7,7 +7,7 @@
       <template #heading-right>
         <div class="buttons is-centered">
           <a class="button is-small" @click="mark_all_played">
-            <mdicon class="icon" name="pencil" size="16" />
+            <span class="icon"><mdicon name="pencil" size="16" /></span>
             <span v-text="$t('page.podcasts.mark-all-played')" />
           </a>
         </div>
@@ -31,11 +31,11 @@
       <template #heading-right>
         <div class="buttons is-centered">
           <a v-if="rss.tracks > 0" class="button is-small" @click="update_rss">
-            <mdicon class="icon" name="refresh" size="16" />
+            <span class="icon"><mdicon name="refresh" size="16" /></span>
             <span v-text="$t('page.podcasts.update')" />
           </a>
           <a class="button is-small" @click="open_add_podcast_dialog">
-            <mdicon class="icon" name="rss" size="16" />
+            <span class="icon"><mdicon name="rss" size="16" /></span>
             <span v-text="$t('page.podcasts.add')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue
index ecc33cfa..e36dd86f 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -14,11 +14,13 @@
           :class="{ 'is-info': show_only_next_items }"
           @click="update_show_next_items"
         >
-          <mdicon class="icon" name="arrow-collapse-down" size="16" />
+          <span class="icon"
+            ><mdicon name="arrow-collapse-down" size="16"
+          /></span>
           <span v-text="$t('page.queue.hide-previous')" />
         </a>
         <a class="button is-small" @click="open_add_stream_dialog">
-          <mdicon class="icon" name="web" size="16" />
+          <span class="icon"><mdicon name="web" size="16" /></span>
           <span v-text="$t('page.queue.add-stream')" />
         </a>
         <a
@@ -26,11 +28,11 @@
           :class="{ 'is-info': edit_mode }"
           @click="edit_mode = !edit_mode"
         >
-          <mdicon class="icon" name="pencil" size="16" />
+          <span class="icon"><mdicon name="pencil" size="16" /></span>
           <span v-text="$t('page.queue.edit')" />
         </a>
         <a class="button is-small" @click="queue_clear">
-          <mdicon class="icon" name="delete-empty" size="16" />
+          <span class="icon"><mdicon name="delete-empty" size="16" /></span>
           <span v-text="$t('page.queue.clear')" />
         </a>
         <a
@@ -39,7 +41,7 @@
           :disabled="queue_items.length === 0"
           @click="save_dialog"
         >
-          <mdicon class="icon" name="content-save" size="16" />
+          <span class="icon"><mdicon name="content-save" size="16" /></span>
           <span v-text="$t('page.queue.save')" />
         </a>
       </div>
@@ -61,17 +63,17 @@
           >
             <template #actions>
               <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
-                <mdicon
-                  class="icon has-text-dark"
-                  name="dots-vertical"
-                  size="16"
-                />
+                <span class="icon has-text-dark"
+                  ><mdicon name="dots-vertical" size="16"
+                /></span>
               </a>
               <a
                 v-if="element.id !== state.item_id && edit_mode"
                 @click.prevent.stop="remove(element)"
               >
-                <mdicon class="icon has-text-grey" name="delete" size="18" />
+                <span class="icon has-text-grey"
+                  ><mdicon name="delete" size="18"
+                /></span>
               </a>
             </template>
           </list-item-queue-item>
diff --git a/web-src/src/pages/PageSearch.vue b/web-src/src/pages/PageSearch.vue
index 10680bcb..f4705f99 100644
--- a/web-src/src/pages/PageSearch.vue
+++ b/web-src/src/pages/PageSearch.vue
@@ -16,7 +16,9 @@
                     placeholder="Search"
                     autocomplete="off"
                   />
-                  <mdicon class="icon is-left" name="magnify" size="16" />
+                  <span class="icon is-left"
+                    ><mdicon name="magnify" size="16"
+                  /></span>
                 </p>
                 <p class="help has-text-centered">
                   <span v-html="$t('page.search.help')" />
diff --git a/web-src/src/pages/SettingsPageArtwork.vue b/web-src/src/pages/SettingsPageArtwork.vue
index b7474a47..cdcdb0e3 100644
--- a/web-src/src/pages/SettingsPageArtwork.vue
+++ b/web-src/src/pages/SettingsPageArtwork.vue
@@ -22,7 +22,7 @@
           <template #label>
             <span v-text="$t('page.settings.artwork.spotify')" />
             <a href="https://www.spotify.com/" target="_blank">
-              <mdicon class="icon" name="open-in-new" size="16" />
+              <span class="icon"><mdicon name="open-in-new" size="16" /></span>
             </a>
           </template>
         </settings-checkbox>
@@ -33,7 +33,7 @@
           <template #label>
             <span v-text="$t('page.settings.artwork.discogs')" />
             <a href="https://www.discogs.com/" target="_blank">
-              <mdicon class="icon" name="open-in-new" size="16" />
+              <span class="icon"><mdicon name="open-in-new" size="16" /></span>
             </a>
           </template>
         </settings-checkbox>
@@ -44,7 +44,7 @@
           <template #label>
             <span v-text="$t('page.settings.artwork.coverartarchive')" />
             <a href="https://coverartarchive.org/" target="_blank">
-              <mdicon class="icon" name="open-in-new" size="16" />
+              <span class="icon"><mdicon name="open-in-new" size="16" /></span>
             </a>
           </template>
         </settings-checkbox>
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index 27124bf2..c10c7ee1 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/SpotifyPageAlbum.vue
@@ -11,14 +11,14 @@
       </h2>
       <div class="buttons fd-is-centered-mobile fd-has-margin-top">
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="shuffle" size="16" />
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span v-text="$t('page.spotify.album.shuffle')" />
         </a>
         <a
           class="button is-small is-light is-rounded"
           @click="show_album_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
       </div>
     </template>
@@ -49,7 +49,9 @@
       >
         <template #actions>
           <a @click.prevent.stop="open_track_dialog(track)">
-            <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+            <span class="icon has-text-dark"
+              ><mdicon name="dots-vertical" size="16"
+            /></span>
           </a>
         </template>
       </spotify-list-item-track>
diff --git a/web-src/src/pages/SpotifyPageArtist.vue b/web-src/src/pages/SpotifyPageArtist.vue
index 9731e288..238f36d5 100644
--- a/web-src/src/pages/SpotifyPageArtist.vue
+++ b/web-src/src/pages/SpotifyPageArtist.vue
@@ -9,10 +9,10 @@
           class="button is-small is-light is-rounded"
           @click="show_artist_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="shuffle" size="16" />
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span v-text="$t('page.spotify.artist.shuffle')" />
         </a>
       </div>
@@ -41,7 +41,9 @@
         </template>
         <template #actions>
           <a @click.prevent.stop="open_dialog(album)">
-            <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+            <span class="icon has-text-dark"
+              ><mdicon name="dots-vertical" size="16"
+            /></span>
           </a>
         </template>
       </spotify-list-item-album>
diff --git a/web-src/src/pages/SpotifyPageBrowse.vue b/web-src/src/pages/SpotifyPageBrowse.vue
index 379c10d7..b0c63859 100644
--- a/web-src/src/pages/SpotifyPageBrowse.vue
+++ b/web-src/src/pages/SpotifyPageBrowse.vue
@@ -26,11 +26,9 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-album>
@@ -68,11 +66,9 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-playlist>
diff --git a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue b/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
index ea36cb1f..c82a8277 100644
--- a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
+++ b/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
@@ -13,11 +13,9 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-playlist>
diff --git a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue b/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
index b5fbe1bb..56fec009 100644
--- a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
+++ b/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
@@ -25,11 +25,9 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-album>
diff --git a/web-src/src/pages/SpotifyPagePlaylist.vue b/web-src/src/pages/SpotifyPagePlaylist.vue
index 0ee2ac74..c335b3f4 100644
--- a/web-src/src/pages/SpotifyPagePlaylist.vue
+++ b/web-src/src/pages/SpotifyPagePlaylist.vue
@@ -9,10 +9,10 @@
           class="button is-small is-light is-rounded"
           @click="show_playlist_details_modal = true"
         >
-          <mdicon class="icon" name="dots-horizontal" size="16" />
+          <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
         </a>
         <a class="button is-small is-dark is-rounded" @click="play">
-          <mdicon class="icon" name="shuffle" size="16" />
+          <span class="icon"><mdicon name="shuffle" size="16" /></span>
           <span v-text="$t('page.spotify.playlist.shuffle')" />
         </a>
       </div>
@@ -34,7 +34,9 @@
       >
         <template #actions>
           <a @click.prevent.stop="open_track_dialog(item.track)">
-            <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
+            <span class="icon has-text-dark"
+              ><mdicon name="dots-vertical" size="16"
+            /></span>
           </a>
         </template>
       </spotify-list-item-track>
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index 527c4382..3db2c719 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/web-src/src/pages/SpotifyPageSearch.vue
@@ -16,7 +16,9 @@
                     placeholder="Search"
                     autocomplete="off"
                   />
-                  <mdicon class="icon is-left" name="magnify" size="16" />
+                  <span class="icon is-left"
+                    ><mdicon name="magnify" size="16"
+                  /></span>
                 </p>
               </div>
             </form>
@@ -50,11 +52,9 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_track_dialog(track)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-track>
@@ -105,11 +105,9 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_artist_dialog(artist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-artist>
@@ -171,11 +169,9 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-album>
@@ -225,11 +221,9 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <mdicon
-                class="icon has-text-dark"
-                name="dots-vertical"
-                size="16"
-              />
+              <span class="icon has-text-dark"
+                ><mdicon name="dots-vertical" size="16"
+              /></span>
             </a>
           </template>
         </spotify-list-item-playlist>
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 203e047c..e68c5e25 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -15,14 +15,18 @@
                 class="button is-small is-white"
                 @click="scroll_to_top"
               >
-                <mdicon class="icon is-small" name="chevron-down" size="16" />
+                <span class="icon is-small"
+                  ><mdicon name="chevron-down" size="16"
+                /></span>
               </a>
               <a
                 v-else
                 class="button is-small is-white"
                 @click="scroll_to_content"
               >
-                <mdicon class="icon is-small" name="chevron-up" size="16" />
+                <span class="icon is-small"
+                  ><mdicon name="chevron-up" size="16"
+                /></span>
               </a>
             </nav>
           </section>