diff --git a/web-src/src/components/DropdownMenu.vue b/web-src/src/components/DropdownMenu.vue
index 82ea4624..ed28aa1e 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" />
-        <span class="icon"><mdicon name="chevron-down" size="16" /></span>
+        <mdicon class="icon" name="chevron-down" size="16" />
       </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 3f4483a9..e1e8a782 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -32,9 +32,7 @@
       </div>
       <div class="media-right" style="padding-top: 0.7rem">
         <a @click.prevent.stop="open_dialog(album.item)">
-          <span class="icon has-text-dark"
-            ><mdicon name="dots-vertical" size="16"
-          /></span>
+          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index 35a50f23..825a48fb 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -19,9 +19,7 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(artist.item)">
-          <span class="icon has-text-dark"
-            ><mdicon name="dots-vertical" size="16"
-          /></span>
+          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index d8871f92..298e7487 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -19,9 +19,7 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(composer.item)">
-          <span class="icon has-text-dark"
-            ><mdicon name="dots-vertical" size="16"
-          /></span>
+          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListDirectories.vue b/web-src/src/components/ListDirectories.vue
index 76dea86f..f1a715bf 100644
--- a/web-src/src/components/ListDirectories.vue
+++ b/web-src/src/components/ListDirectories.vue
@@ -5,9 +5,7 @@
     @click="open_parent_directory()"
   >
     <figure class="media-left is-clickable">
-      <span class="icon"
-        ><mdicon name="subdirectory-arrow-left" size="16"
-      /></span>
+      <mdicon class="icon" name="subdirectory-arrow-left" size="16" />
     </figure>
     <div class="media-content is-clickable is-clipped">
       <h1 class="title is-6">..</h1>
@@ -19,7 +17,7 @@
   <template v-for="directory in directories" :key="directory.path">
     <div class="media" @click="open_directory(directory)">
       <figure class="media-left is-clickable">
-        <span class="icon"><mdicon name="folder" size="16" /></span>
+        <mdicon class="icon" name="folder" size="16" />
       </figure>
       <div class="media-content is-clickable is-clipped">
         <h1
@@ -30,9 +28,7 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(directory)">
-          <span class="icon has-text-dark"
-            ><mdicon name="dots-vertical" size="16"
-          /></span>
+          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index c600fcef..d99c3d74 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -15,9 +15,7 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(genre.item)">
-          <span class="icon has-text-dark"
-            ><mdicon name="dots-vertical" size="16"
-          /></span>
+          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue
index b58ef8b8..5f2306a0 100644
--- a/web-src/src/components/ListItemQueueItem.vue
+++ b/web-src/src/components/ListItemQueueItem.vue
@@ -1,9 +1,11 @@
 <template>
   <div v-if="is_next || !show_only_next_items" class="media">
     <div v-if="edit_mode" class="media-left">
-      <span class="icon has-text-grey fd-is-movable handle"
-        ><mdicon name="drag-horizontal" size="16"
-      /></span>
+      <mdicon
+        class="icon has-text-grey fd-is-movable handle"
+        name="drag-horizontal"
+        size="16"
+      />
     </div>
     <div class="media-content is-clickable is-clipped" @click="play">
       <h1
diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
index 26c10c3c..a05d78a5 100644
--- a/web-src/src/components/ListPlaylists.vue
+++ b/web-src/src/components/ListPlaylists.vue
@@ -7,18 +7,14 @@
     @click="open_playlist(playlist.item)"
   >
     <figure class="media-left is-clickable">
-      <span class="icon"
-        ><mdicon :name="icon_name(playlist.item)" size="16"
-      /></span>
+      <mdicon class="icon" :name="icon_name(playlist.item)" size="16" />
     </figure>
     <div class="media-content is-clickable 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)">
-        <span class="icon has-text-dark"
-          ><mdicon name="dots-vertical" size="16"
-        /></span>
+        <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
       </a>
     </div>
   </div>
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index 528056f2..f04ca1e4 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -14,7 +14,7 @@
       @click="play_track(index, track.item)"
     >
       <figure v-if="show_icon" class="media-left is-clickable">
-        <span class="icon"><mdicon name="file-outline" size="16" /></span>
+        <mdicon class="icon" name="file-outline" size="16" />
       </figure>
       <div class="media-content is-clickable is-clipped">
         <h1
@@ -35,9 +35,7 @@
       </div>
       <div class="media-right">
         <a @click.prevent.stop="open_dialog(track.item)">
-          <span class="icon has-text-dark"
-            ><mdicon name="dots-vertical" size="16"
-          /></span>
+          <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
         </a>
       </div>
     </div>
diff --git a/web-src/src/components/ModalDialog.vue b/web-src/src/components/ModalDialog.vue
index 3e10aa7d..eaf51f51 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')">
-                <span class="icon"><mdicon name="cancel" size="16" /></span>
+                <mdicon class="icon" name="cancel" size="16" />
                 <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')"
               >
-                <span class="icon"><mdicon name="delete" size="16" /></span>
+                <mdicon class="icon" name="delete" size="16" />
                 <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')"
               >
-                <span class="icon"><mdicon name="check" size="16" /></span>
+                <mdicon class="icon" name="check" size="16" />
                 <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 95602d01..3b8ac1c0 100644
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@@ -18,9 +18,7 @@
                       :placeholder="$t('dialog.add.rss.placeholder')"
                       :disabled="loading"
                     />
-                    <span class="icon is-left"
-                      ><mdicon name="rss" size="16"
-                    /></span>
+                    <mdicon class="icon is-left" name="rss" size="16" />
                   </p>
                   <p class="help" v-text="$t('dialog.add.rss.help')" />
                 </div>
@@ -28,7 +26,7 @@
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item button is-loading">
-                <span class="icon"><mdicon name="web" size="16" /></span>
+                <mdicon class="icon" name="web" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.add.rss.processing')"
@@ -40,16 +38,14 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><mdicon name="cancel" size="16" /></span>
+                <mdicon class="icon" name="cancel" size="16" />
                 <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"
               >
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <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 6b099d5c..79b86e7c 100644
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@@ -18,16 +18,14 @@
                       :placeholder="$t('dialog.add.stream.placeholder')"
                       :disabled="loading"
                     />
-                    <span class="icon is-left"
-                      ><mdicon name="web" size="16"
-                    /></span>
+                    <mdicon class="icon is-left" name="web" size="16" />
                   </p>
                 </div>
               </form>
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
-                <span class="icon"><mdicon name="web" size="16" /></span>
+                <mdicon class="icon" name="web" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.add.stream.loading')"
@@ -39,23 +37,21 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><mdicon name="cancel" size="16" /></span>
+                <mdicon class="icon" name="cancel" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.add.stream.cancel')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="add_stream">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <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"
               >
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 2aae4fa8..bc7a988e 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -89,19 +89,15 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.album.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.album.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 3426e7d4..c479e976 100644
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@@ -40,19 +40,15 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.artist.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 54a2b948..df681ce8 100644
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@@ -39,22 +39,18 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.composer.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.composer.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 69551a48..8ac80803 100644
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/web-src/src/components/ModalDialogDirectory.vue
@@ -10,22 +10,18 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.directory.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.directory.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 efee7417..83faa52c 100644
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@@ -33,19 +33,15 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.genre.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 a617e10d..ed1f6632 100644
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@@ -36,22 +36,18 @@
             </div>
             <footer v-if="!playlist.folder" class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 2c1f0aa5..c620a036 100644
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@@ -18,16 +18,14 @@
                       :placeholder="$t('dialog.playlist.save.playlist-name')"
                       :disabled="loading"
                     />
-                    <span class="icon is-left"
-                      ><mdicon name="file-music" size="16"
-                    /></span>
+                    <mdicon class="icon is-left" name="file-music" size="16" />
                   </p>
                 </div>
               </form>
             </div>
             <footer v-if="loading" class="card-footer">
               <a class="card-footer-item has-text-dark">
-                <span class="icon"><mdicon name="web" size="16" /></span>
+                <mdicon class="icon" name="web" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.save.saving')"
@@ -39,7 +37,7 @@
                 class="card-footer-item has-text-danger"
                 @click="$emit('close')"
               >
-                <span class="icon"><mdicon name="cancel" size="16" /></span>
+                <mdicon class="icon" name="cancel" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.playlist.save.cancel')"
@@ -49,9 +47,7 @@
                 class="card-footer-item has-background-info has-text-white has-text-weight-bold"
                 @click="save"
               >
-                <span class="icon"
-                  ><mdicon name="content-save" size="16"
-                /></span>
+                <mdicon class="icon" name="content-save" size="16" />
                 <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 ef2d1a5c..c80de05e 100644
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@@ -142,14 +142,14 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="remove">
-                <span class="icon"><mdicon name="delete" size="16" /></span>
+                <mdicon class="icon" name="delete" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.queue-item.remove')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 d0749a89..4c8073d1 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')"
               >
-                <span class="icon"><mdicon name="cancel" size="16" /></span>
+                <mdicon class="icon" name="cancel" size="16" />
                 <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"
               >
-                <span class="icon"><mdicon name="cellphone" size="16" /></span>
+                <mdicon class="icon" name="cellphone" size="16" />
                 <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 c486622b..01de12a2 100644
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@@ -168,19 +168,15 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.track.add')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="queue_add_next">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span class="is-size-7" v-text="$t('dialog.track.add-next')" />
               </a>
               <a class="card-footer-item has-text-dark" @click="play_track">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 12018baa..356099d2 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -12,7 +12,7 @@
     <div class="navbar-brand is-flex-grow-1">
       <!-- Link to queue -->
       <navbar-item-link to="/" exact>
-        <span class="icon"><mdicon name="playlist-play" size="24" /></span>
+        <mdicon class="icon" name="playlist-play" size="24" />
       </navbar-item-link>
       <!-- Now playing artist/title (not visible on "now playing" page) -->
       <router-link
@@ -71,11 +71,11 @@
         class="navbar-item ml-auto is-hidden-desktop"
         @click="show_player_menu = !show_player_menu"
       >
-        <span class="icon"
-          ><mdicon
-            :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
-            size="18"
-        /></span>
+        <mdicon
+          class="icon"
+          :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
+          size="18"
+        />
       </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"
         >
-          <span class="icon"
-            ><mdicon
-              :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
-              size="18"
-          /></span>
+          <mdicon
+            class="icon"
+            :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
+            size="18"
+          />
         </a>
         <div
           class="navbar-dropdown is-right is-boxed"
@@ -142,17 +142,13 @@
               <div class="level-left is-flex-grow-1">
                 <div class="level-item is-flex-grow-0">
                   <a
-                    class="button is-white is-small"
-                    :class="{ 'is-loading': loading }"
-                    ><span
-                      class="icon is-clickable"
-                      :class="{
-                        'has-text-grey-light': !playing && !loading,
-                        'is-loading': loading
-                      }"
-                      @click="togglePlay"
-                      ><mdicon name="broadcast" size="18"
-                    /></span>
+                    class="button is-clickable is-white is-small"
+                    :class="{
+                      'has-text-grey-light': !playing && !loading,
+                      'is-loading': loading
+                    }"
+                    @click="togglePlay"
+                    ><mdicon class="icon" name="broadcast" size="18" />
                   </a>
                 </div>
                 <div class="level-item">
@@ -163,12 +159,12 @@
                     >
                       <span v-text="$t('navigation.stream')" />
                       <a href="stream.mp3" class="ml-2" target="_blank"
-                        ><span class="icon"
-                          ><mdicon
-                            name="open-in-new"
-                            size="16"
-                            style="vertical-align: middle"
-                        /></span>
+                        ><mdicon
+                          class="icon"
+                          name="open-in-new"
+                          size="16"
+                          style="vertical-align: middle"
+                        />
                       </a>
                     </p>
                     <input
@@ -227,11 +223,11 @@
             <div class="level-left is-flex-grow-1">
               <div class="level-item is-flex-grow-0">
                 <a class="button is-white is-small" @click="toggle_mute_volume">
-                  <span class="icon"
-                    ><mdicon
-                      :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
-                      size="18"
-                  /></span>
+                  <mdicon
+                    class="icon"
+                    :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
+                    size="18"
+                  />
                 </a>
               </div>
               <div class="level-item">
@@ -263,18 +259,13 @@
             <div class="level-left is-flex-grow-1">
               <div class="level-item is-flex-grow-0">
                 <a
-                  class="button is-white is-small"
-                  :class="{ 'is-loading': loading }"
-                >
-                  <span
-                    class="icon is-clickable"
-                    :class="{
-                      'has-text-grey-light': !playing && !loading,
-                      'is-loading': loading
-                    }"
-                    @click="togglePlay"
-                    ><mdicon name="radio-tower" size="16" />
-                  </span>
+                  class="button is-clickable is-white is-small"
+                  :class="{
+                    'has-text-grey-light': !playing && !loading,
+                    'is-loading': loading
+                  }"
+                  @click="togglePlay"
+                  ><mdicon class="icon" name="radio-tower" size="16" />
                 </a>
               </div>
               <div class="level-item">
@@ -285,12 +276,12 @@
                   >
                     <span v-text="$t('navigation.stream')" />
                     <a href="stream.mp3" class="ml-2" target="_blank"
-                      ><span class="icon"
-                        ><mdicon
-                          name="open-in-new"
-                          size="16"
-                          style="vertical-align: middle"
-                      /></span>
+                      ><mdicon
+                        class="icon"
+                        name="open-in-new"
+                        size="16"
+                        style="vertical-align: middle"
+                      />
                     </a>
                   </p>
                   <input
diff --git a/web-src/src/components/NavbarItemOutput.vue b/web-src/src/components/NavbarItemOutput.vue
index 0f746bc3..09e6d712 100644
--- a/web-src/src/components/NavbarItemOutput.vue
+++ b/web-src/src/components/NavbarItemOutput.vue
@@ -3,13 +3,17 @@
     <div class="level is-mobile">
       <div class="level-left is-flex-grow-1">
         <div class="level-item is-flex-grow-0">
-          <a class="button is-white is-small">
-            <span
-              class="icon is-clickable"
-              :class="{ 'has-text-grey-light': !output.selected }"
-              @click="set_enabled"
-              ><mdicon :name="type_class" size="18" :title="output.type"
-            /></span>
+          <a
+            class="button is-clickable is-white is-small"
+            :class="{ 'has-text-grey-light': !output.selected }"
+            @click="set_enabled"
+          >
+            <mdicon
+              class="icon"
+              :name="type_class"
+              size="18"
+              :title="output.type"
+            />
           </a>
         </div>
         <div class="level-item">
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index 62904931..b7d58c88 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">
-        <span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
+        <mdicon class="icon" name="music-box-multiple" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_music" to="/music">
-        <span class="icon"><mdicon name="music" size="16" /></span>
+        <mdicon class="icon" name="music" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
-        <span class="icon"><mdicon name="microphone" size="16" /></span>
+        <mdicon class="icon" name="microphone" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
-        <span class="icon"><mdicon name="book-open-variant" size="16" /></span>
+        <mdicon class="icon" name="book-open-variant" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_radio" to="/radio">
-        <span class="icon"><mdicon name="radio" size="16" /></span>
+        <mdicon class="icon" name="radio" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_files" to="/files">
-        <span class="icon"><mdicon name="folder-open" size="16" /></span>
+        <mdicon class="icon" name="folder-open" size="16" />
       </navbar-item-link>
       <navbar-item-link v-if="is_visible_search" to="/search">
-        <span class="icon"><mdicon name="magnify" size="16" /></span>
+        <mdicon class="icon" name="magnify" size="16" />
       </navbar-item-link>
       <div
         class="navbar-burger"
@@ -47,9 +47,7 @@
           @click="on_click_outside_settings"
         >
           <a class="navbar-link is-arrowless">
-            <span class="icon is-hidden-touch"
-              ><mdicon name="menu" size="24"
-            /></span>
+            <mdicon class="icon is-hidden-touch" name="menu" size="24" />
             <span
               class="is-hidden-desktop has-text-weight-bold"
               v-text="$t('navigation.title')"
@@ -57,13 +55,11 @@
           </a>
           <div class="navbar-dropdown is-right">
             <navbar-item-link to="/playlists">
-              <span class="icon"
-                ><mdicon name="music-box-multiple" size="16"
-              /></span>
+              <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>
             <navbar-item-link to="/music" exact>
-              <span class="icon"><mdicon name="music" size="16" /></span>
+              <mdicon class="icon" name="music" size="16" />
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>
             <navbar-item-link to="/music/artists">
@@ -91,25 +87,23 @@
               />
             </navbar-item-link>
             <navbar-item-link to="/podcasts">
-              <span class="icon"><mdicon name="microphone" size="16" /></span>
+              <mdicon class="icon" name="microphone" size="16" />
               <b v-text="$t('navigation.podcasts')" />
             </navbar-item-link>
             <navbar-item-link to="/audiobooks">
-              <span class="icon"
-                ><mdicon name="book-open-variant" size="16"
-              /></span>
+              <mdicon class="icon" name="book-open-variant" size="16" />
               <b v-text="$t('navigation.audiobooks')" />
             </navbar-item-link>
             <navbar-item-link to="/radio">
-              <span class="icon"><mdicon name="radio" size="16" /></span>
+              <mdicon class="icon" name="radio" size="16" />
               <b v-text="$t('navigation.radio')" />
             </navbar-item-link>
             <navbar-item-link to="/files">
-              <span class="icon"><mdicon name="folder-open" size="16" /></span>
+              <mdicon class="icon" name="folder-open" size="16" />
               <b v-text="$t('navigation.files')" />
             </navbar-item-link>
             <navbar-item-link to="/search">
-              <span class="icon"><mdicon name="magnify" size="16" /></span>
+              <mdicon class="icon" name="magnify" size="16" />
               <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 4aaa90b3..1d82fb44 100644
--- a/web-src/src/components/PlayerButtonConsume.vue
+++ b/web-src/src/components/PlayerButtonConsume.vue
@@ -1,11 +1,11 @@
 <template>
   <a :class="{ 'is-info': is_consume }" @click="toggle_consume_mode">
-    <span class="icon"
-      ><mdicon
-        name="fire"
-        :size="icon_size"
-        :title="$t('player.button.consume')"
-    /></span>
+    <mdicon
+      class="icon"
+      name="fire"
+      :size="icon_size"
+      :title="$t('player.button.consume')"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonNext.vue b/web-src/src/components/PlayerButtonNext.vue
index 6cff8b26..898e93fc 100644
--- a/web-src/src/components/PlayerButtonNext.vue
+++ b/web-src/src/components/PlayerButtonNext.vue
@@ -1,11 +1,10 @@
 <template>
   <a :disabled="disabled" @click="play_next">
-    <span class="icon"
-      ><mdicon
-        name="skip-forward"
-        :size="icon_size"
-        :title="$t('player.button.skip-forward')"
-    /></span>
+    <mdicon
+      name="skip-forward"
+      :size="icon_size"
+      :title="$t('player.button.skip-forward')"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonPlayPause.vue b/web-src/src/components/PlayerButtonPlayPause.vue
index 8aceeef9..e7fd7554 100644
--- a/web-src/src/components/PlayerButtonPlayPause.vue
+++ b/web-src/src/components/PlayerButtonPlayPause.vue
@@ -1,11 +1,10 @@
 <template>
   <a :disabled="disabled" @click="toggle_play_pause">
-    <span class="icon"
-      ><mdicon
-        :name="icon_name"
-        :size="icon_size"
-        :title="$t('player.button.' + icon_name)"
-    /></span>
+    <mdicon
+      :name="icon_name"
+      :size="icon_size"
+      :title="$t('player.button.' + icon_name)"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonPrevious.vue b/web-src/src/components/PlayerButtonPrevious.vue
index 6ba13a35..c76f1d79 100644
--- a/web-src/src/components/PlayerButtonPrevious.vue
+++ b/web-src/src/components/PlayerButtonPrevious.vue
@@ -1,11 +1,10 @@
 <template>
   <a :disabled="disabled" @click="play_previous">
-    <span class="icon"
-      ><mdicon
-        name="skip-backward"
-        :size="icon_size"
-        :title="$t('player.button.skip-backward')"
-    /></span>
+    <mdicon
+      name="skip-backward"
+      :size="icon_size"
+      :title="$t('player.button.skip-backward')"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonRepeat.vue b/web-src/src/components/PlayerButtonRepeat.vue
index 863ff9dc..511f8837 100644
--- a/web-src/src/components/PlayerButtonRepeat.vue
+++ b/web-src/src/components/PlayerButtonRepeat.vue
@@ -1,11 +1,11 @@
 <template>
   <a :class="{ 'is-info': !is_repeat_off }" @click="toggle_repeat_mode">
-    <span class="icon"
-      ><mdicon
-        :name="icon_name"
-        :size="icon_size"
-        :title="$t('player.button.' + icon_name)"
-    /></span>
+    <mdicon
+      class="icon"
+      :name="icon_name"
+      :size="icon_size"
+      :title="$t('player.button.' + icon_name)"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonSeekBack.vue b/web-src/src/components/PlayerButtonSeekBack.vue
index 70897838..0f6f4584 100644
--- a/web-src/src/components/PlayerButtonSeekBack.vue
+++ b/web-src/src/components/PlayerButtonSeekBack.vue
@@ -1,11 +1,10 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <span class="icon"
-      ><mdicon
-        name="rewind-10"
-        :size="icon_size"
-        :title="$t('player.button.seek-backward')"
-    /></span>
+    <mdicon
+      name="rewind-10"
+      :size="icon_size"
+      :title="$t('player.button.seek-backward')"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonSeekForward.vue b/web-src/src/components/PlayerButtonSeekForward.vue
index 012313b0..cefc6b62 100644
--- a/web-src/src/components/PlayerButtonSeekForward.vue
+++ b/web-src/src/components/PlayerButtonSeekForward.vue
@@ -1,11 +1,10 @@
 <template>
   <a v-if="visible" :disabled="disabled" @click="seek">
-    <span class="icon"
-      ><mdicon
-        name="fast-forward-30"
-        :size="icon_size"
-        :title="$t('player.button.seek-forward')"
-    /></span>
+    <mdicon
+      name="fast-forward-30"
+      :size="icon_size"
+      :title="$t('player.button.seek-forward')"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/PlayerButtonShuffle.vue b/web-src/src/components/PlayerButtonShuffle.vue
index 95f8335f..b30d5902 100644
--- a/web-src/src/components/PlayerButtonShuffle.vue
+++ b/web-src/src/components/PlayerButtonShuffle.vue
@@ -1,11 +1,11 @@
 <template>
   <a :class="{ 'is-info': is_shuffle }" @click="toggle_shuffle_mode">
-    <span class="icon"
-      ><mdicon
-        :name="icon_name"
-        :size="icon_size"
-        :title="$t('player.button.' + icon_name)"
-    /></span>
+    <mdicon
+      class="icon"
+      :name="icon_name"
+      :size="icon_size"
+      :title="$t('player.button.' + icon_name)"
+    />
   </a>
 </template>
 
diff --git a/web-src/src/components/SpotifyModalDialogAlbum.vue b/web-src/src/components/SpotifyModalDialogAlbum.vue
index a13c11a1..15bb364c 100644
--- a/web-src/src/components/SpotifyModalDialogAlbum.vue
+++ b/web-src/src/components/SpotifyModalDialogAlbum.vue
@@ -54,25 +54,21 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <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">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.album.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 5f3fc176..4707bb3f 100644
--- a/web-src/src/components/SpotifyModalDialogArtist.vue
+++ b/web-src/src/components/SpotifyModalDialogArtist.vue
@@ -37,25 +37,21 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <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">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.artist.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 7aafc00f..8646c83e 100644
--- a/web-src/src/components/SpotifyModalDialogPlaylist.vue
+++ b/web-src/src/components/SpotifyModalDialogPlaylist.vue
@@ -42,25 +42,21 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <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">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.playlist.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 d1fd9574..4c06bc61 100644
--- a/web-src/src/components/SpotifyModalDialogTrack.vue
+++ b/web-src/src/components/SpotifyModalDialogTrack.vue
@@ -72,25 +72,21 @@
             </div>
             <footer class="card-footer">
               <a class="card-footer-item has-text-dark" @click="queue_add">
-                <span class="icon"
-                  ><mdicon name="playlist-plus" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-plus" size="16" />
                 <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">
-                <span class="icon"
-                  ><mdicon name="playlist-play" size="16"
-                /></span>
+                <mdicon class="icon" name="playlist-play" size="16" />
                 <span
                   class="is-size-7"
                   v-text="$t('dialog.spotify.track.add-next')"
                 />
               </a>
               <a class="card-footer-item has-text-dark" @click="play">
-                <span class="icon"><mdicon name="play" size="16" /></span>
+                <mdicon class="icon" name="play" size="16" />
                 <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 e05ebb33..f2cbec84 100644
--- a/web-src/src/components/TabsAudiobooks.vue
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -12,9 +12,11 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="account-music" size="16"
-                    /></span>
+                    <mdicon
+                      class="icon is-small"
+                      name="account-music"
+                      size="16"
+                    />
                     <span v-text="$t('page.audiobooks.tabs.authors')" />
                   </a>
                 </li>
@@ -26,9 +28,7 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="album" size="16"
-                    /></span>
+                    <mdicon class="icon is-small" name="album" size="16" />
                     <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 ac232456..5de08ede 100644
--- a/web-src/src/components/TabsMusic.vue
+++ b/web-src/src/components/TabsMusic.vue
@@ -12,9 +12,7 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="web" size="16"
-                    /></span>
+                    <mdicon class="icon is-small" name="web" size="16" />
                     <span v-text="$t('page.browse.tabs.browse')" />
                   </a>
                 </li>
@@ -26,9 +24,11 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="account-music" size="16"
-                    /></span>
+                    <mdicon
+                      class="icon is-small"
+                      name="account-music"
+                      size="16"
+                    />
                     <span v-text="$t('page.browse.tabs.artists')" />
                   </a>
                 </li>
@@ -40,9 +40,7 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="album" size="16"
-                    /></span>
+                    <mdicon class="icon is-small" name="album" size="16" />
                     <span v-text="$t('page.browse.tabs.albums')" />
                   </a>
                 </li>
@@ -54,9 +52,7 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="speaker" size="16"
-                    /></span>
+                    <mdicon class="icon is-small" name="speaker" size="16" />
                     <span v-text="$t('page.browse.tabs.genres')" />
                   </a>
                 </li>
@@ -68,9 +64,11 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="book-open-page-variant" size="16"
-                    /></span>
+                    <mdicon
+                      class="icon is-small"
+                      name="book-open-page-variant"
+                      size="16"
+                    />
                     <span v-text="$t('page.browse.tabs.composers')" />
                   </a>
                 </li>
@@ -83,9 +81,7 @@
               >
                 <li :class="{ 'is-active': isActive }">
                   <a @click="navigate" @keypress.enter="navigate">
-                    <span class="icon is-small"
-                      ><mdicon name="spotify" size="16"
-                    /></span>
+                    <mdicon class="icon is-small" name="spotify" size="16" />
                     <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 fe8749f0..4fd24a50 100644
--- a/web-src/src/components/TabsSearch.vue
+++ b/web-src/src/components/TabsSearch.vue
@@ -11,9 +11,7 @@
                 }"
               >
                 <a @click="search_library">
-                  <span class="icon is-small"
-                    ><mdicon name="bookshelf" size="16"
-                  /></span>
+                  <mdicon class="icon is-small" name="bookshelf" size="16" />
                   <span v-text="$t('page.search.tabs.library')" />
                 </a>
               </li>
@@ -23,9 +21,7 @@
                 }"
               >
                 <a @click="search_spotify">
-                  <span class="icon is-small"
-                    ><mdicon name="spotify" size="16"
-                  /></span>
+                  <mdicon class="icon is-small" name="spotify" size="16" />
                   <span v-text="$t('page.search.tabs.spotify')" />
                 </a>
               </li>
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 2f79aca7..62ac0b8c 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -8,16 +8,14 @@
         </h2>
         <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"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.album.shuffle')" />
           </a>
           <a
             class="button is-small is-light is-rounded"
             @click="show_album_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
         </div>
       </template>
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index ce046e6d..cfacd662 100644
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -25,12 +25,10 @@
             class="button is-small is-light is-rounded"
             @click="show_artist_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 b6fc75fc..a39292d9 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -26,12 +26,10 @@
             class="button is-small is-light is-rounded"
             @click="show_artist_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 dde2e6e0..905876e1 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -8,16 +8,14 @@
         </h2>
         <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"><mdicon name="play" size="16" /></span>
+            <mdicon class="icon" name="play" size="16" />
             <span v-text="$t('page.audiobooks.album.play')" />
           </a>
           <a
             class="button is-small is-light is-rounded"
             @click="show_album_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
         </div>
       </template>
diff --git a/web-src/src/pages/PageAudiobooksArtist.vue b/web-src/src/pages/PageAudiobooksArtist.vue
index d432f97c..d1a1e414 100644
--- a/web-src/src/pages/PageAudiobooksArtist.vue
+++ b/web-src/src/pages/PageAudiobooksArtist.vue
@@ -10,12 +10,10 @@
             class="button is-small is-light is-rounded"
             @click="show_artist_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="play" size="16" /></span>
+            <mdicon class="icon" name="play" size="16" />
             <span v-text="$t('page.audiobooks.artist.play')" />
           </a>
         </div>
diff --git a/web-src/src/pages/PageComposer.vue b/web-src/src/pages/PageComposer.vue
index 9e9b411d..4bd00214 100644
--- a/web-src/src/pages/PageComposer.vue
+++ b/web-src/src/pages/PageComposer.vue
@@ -10,12 +10,10 @@
             class="button is-small is-light is-rounded"
             @click="show_composer_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 baeca336..7b6929fb 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -26,12 +26,10 @@
             class="button is-small is-light is-rounded"
             @click="show_composer_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 bb9d9ca9..8703fe8c 100644
--- a/web-src/src/pages/PageFiles.vue
+++ b/web-src/src/pages/PageFiles.vue
@@ -11,12 +11,10 @@
             class="button is-small is-light is-rounded"
             @click="show_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="play" size="16" /></span>
+            <mdicon class="icon" name="play" size="16" />
             <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 87ab8437..b9e8cb3d 100644
--- a/web-src/src/pages/PageGenre.vue
+++ b/web-src/src/pages/PageGenre.vue
@@ -13,12 +13,10 @@
             class="button is-small is-light is-rounded"
             @click="show_genre_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 2860389f..dc064367 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -26,12 +26,10 @@
             class="button is-small is-light is-rounded"
             @click="show_genre_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 6a01e3d7..814b8151 100644
--- a/web-src/src/pages/PagePlaylist.vue
+++ b/web-src/src/pages/PagePlaylist.vue
@@ -10,12 +10,10 @@
             class="button is-small is-light is-rounded"
             @click="show_playlist_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <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 a78110d5..b801cf4e 100644
--- a/web-src/src/pages/PagePodcast.vue
+++ b/web-src/src/pages/PagePodcast.vue
@@ -10,12 +10,10 @@
             class="button is-small is-light is-rounded"
             @click="show_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="play" size="16" /></span>
+            <mdicon class="icon" name="play" size="16" />
             <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 fa256604..ef740f0d 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">
-            <span class="icon"><mdicon name="pencil" size="16" /></span>
+            <mdicon class="icon" name="pencil" size="16" />
             <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">
-            <span class="icon"><mdicon name="refresh" size="16" /></span>
+            <mdicon class="icon" name="refresh" size="16" />
             <span v-text="$t('page.podcasts.update')" />
           </a>
           <a class="button is-small" @click="open_add_podcast_dialog">
-            <span class="icon"><mdicon name="rss" size="16" /></span>
+            <mdicon class="icon" name="rss" size="16" />
             <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 84cc5551..998ea707 100644
--- a/web-src/src/pages/PageQueue.vue
+++ b/web-src/src/pages/PageQueue.vue
@@ -15,13 +15,11 @@
             :class="{ 'is-info': show_only_next_items }"
             @click="update_show_next_items"
           >
-            <span class="icon"
-              ><mdicon name="arrow-collapse-down" size="16"
-            /></span>
+            <mdicon class="icon" name="arrow-collapse-down" size="16" />
             <span v-text="$t('page.queue.hide-previous')" />
           </a>
           <a class="button is-small" @click="open_add_stream_dialog">
-            <span class="icon"><mdicon name="web" size="16" /></span>
+            <mdicon class="icon" name="web" size="16" />
             <span v-text="$t('page.queue.add-stream')" />
           </a>
           <a
@@ -29,11 +27,11 @@
             :class="{ 'is-info': edit_mode }"
             @click="edit_mode = !edit_mode"
           >
-            <span class="icon"><mdicon name="pencil" size="16" /></span>
+            <mdicon class="icon" name="pencil" size="16" />
             <span v-text="$t('page.queue.edit')" />
           </a>
           <a class="button is-small" @click="queue_clear">
-            <span class="icon"><mdicon name="delete-empty" size="16" /></span>
+            <mdicon class="icon" name="delete-empty" size="16" />
             <span v-text="$t('page.queue.clear')" />
           </a>
           <a
@@ -42,7 +40,7 @@
             :disabled="queue_items.length === 0"
             @click="save_dialog"
           >
-            <span class="icon"><mdicon name="content-save" size="16" /></span>
+            <mdicon class="icon" name="content-save" size="16" />
             <span v-text="$t('page.queue.save')" />
           </a>
         </div>
@@ -64,17 +62,17 @@
             >
               <template #actions>
                 <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
-                  <span class="icon has-text-dark"
-                    ><mdicon name="dots-vertical" size="16"
-                  /></span>
+                  <mdicon
+                    class="icon has-text-dark"
+                    name="dots-vertical"
+                    size="16"
+                  />
                 </a>
                 <a
                   v-if="element.id !== state.item_id && edit_mode"
                   @click.prevent.stop="remove(element)"
                 >
-                  <span class="icon has-text-grey"
-                    ><mdicon name="delete" size="18"
-                  /></span>
+                  <mdicon class="icon has-text-grey" name="delete" size="18" />
                 </a>
               </template>
             </list-item-queue-item>
diff --git a/web-src/src/pages/PageSearch.vue b/web-src/src/pages/PageSearch.vue
index 7f70f45b..639e3b0d 100644
--- a/web-src/src/pages/PageSearch.vue
+++ b/web-src/src/pages/PageSearch.vue
@@ -16,9 +16,7 @@
                     :placeholder="$t('page.search.placeholder')"
                     autocomplete="off"
                   />
-                  <span class="icon is-left"
-                    ><mdicon name="magnify" size="16"
-                  /></span>
+                  <mdicon class="icon is-left" name="magnify" size="16" />
                 </p>
                 <p class="help has-text-centered">
                   <span v-html="$t('page.search.help')" />
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index d3a91266..96a3a899 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/SpotifyPageAlbum.vue
@@ -12,16 +12,14 @@
         </h2>
         <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"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.spotify.album.shuffle')" />
           </a>
           <a
             class="button is-small is-light is-rounded"
             @click="show_album_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
         </div>
       </template>
@@ -50,9 +48,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_track_dialog(track)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-track>
diff --git a/web-src/src/pages/SpotifyPageArtist.vue b/web-src/src/pages/SpotifyPageArtist.vue
index 864ba690..79865152 100644
--- a/web-src/src/pages/SpotifyPageArtist.vue
+++ b/web-src/src/pages/SpotifyPageArtist.vue
@@ -10,12 +10,10 @@
             class="button is-small is-light is-rounded"
             @click="show_artist_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.spotify.artist.shuffle')" />
           </a>
         </div>
@@ -43,9 +41,11 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_dialog(album)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
diff --git a/web-src/src/pages/SpotifyPageBrowse.vue b/web-src/src/pages/SpotifyPageBrowse.vue
index 94783208..2f7675df 100644
--- a/web-src/src/pages/SpotifyPageBrowse.vue
+++ b/web-src/src/pages/SpotifyPageBrowse.vue
@@ -25,9 +25,11 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
@@ -65,9 +67,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-playlist>
diff --git a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue b/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
index 764ae658..52814812 100644
--- a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
+++ b/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
@@ -16,9 +16,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-playlist>
diff --git a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue b/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
index c0e75910..e03c6bc5 100644
--- a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
+++ b/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
@@ -24,9 +24,11 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
diff --git a/web-src/src/pages/SpotifyPagePlaylist.vue b/web-src/src/pages/SpotifyPagePlaylist.vue
index 8dbe04fc..45d1d2e2 100644
--- a/web-src/src/pages/SpotifyPagePlaylist.vue
+++ b/web-src/src/pages/SpotifyPagePlaylist.vue
@@ -10,12 +10,10 @@
             class="button is-small is-light is-rounded"
             @click="show_playlist_details_modal = true"
           >
-            <span class="icon"
-              ><mdicon name="dots-horizontal" size="16"
-            /></span>
+            <mdicon class="icon" name="dots-horizontal" size="16" />
           </a>
           <a class="button is-small is-dark is-rounded" @click="play">
-            <span class="icon"><mdicon name="shuffle" size="16" /></span>
+            <mdicon class="icon" name="shuffle" size="16" />
             <span v-text="$t('page.spotify.playlist.shuffle')" />
           </a>
         </div>
@@ -36,9 +34,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_track_dialog(track)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-track>
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index 6753ad37..8b081e32 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/web-src/src/pages/SpotifyPageSearch.vue
@@ -16,9 +16,8 @@
                     :placeholder="$t('page.spotify.search.placeholder')"
                     autocomplete="off"
                   />
-                  <span class="icon is-left"
-                    ><mdicon name="magnify" size="16"
-                  /></span>
+
+                  <mdicon class="icon is-left" name="magnify" size="16" />
                 </p>
               </div>
             </form>
@@ -51,9 +50,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_track_dialog(track)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-track>
@@ -104,9 +105,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_artist_dialog(artist)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-artist>
@@ -167,9 +170,11 @@
           </template>
           <template #actions>
             <a @click.prevent.stop="open_album_dialog(album)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-album>
@@ -219,9 +224,11 @@
         >
           <template #actions>
             <a @click.prevent.stop="open_playlist_dialog(playlist)">
-              <span class="icon has-text-dark"
-                ><mdicon name="dots-vertical" size="16"
-              /></span>
+              <mdicon
+                class="icon has-text-dark"
+                name="dots-vertical"
+                size="16"
+              />
             </a>
           </template>
         </spotify-list-item-playlist>
diff --git a/web-src/src/templates/ContentWithHeading.vue b/web-src/src/templates/ContentWithHeading.vue
index 562bb7ac..01a6e299 100644
--- a/web-src/src/templates/ContentWithHeading.vue
+++ b/web-src/src/templates/ContentWithHeading.vue
@@ -15,18 +15,14 @@
                 class="button is-small is-white"
                 @click="scroll_to_top"
               >
-                <span class="icon is-small"
-                  ><mdicon name="chevron-down" size="16"
-                /></span>
+                <mdicon class="icon is-small" name="chevron-down" size="16" />
               </a>
               <a
                 v-else
                 class="button is-small is-white"
                 @click="scroll_to_content"
               >
-                <span class="icon is-small"
-                  ><mdicon name="chevron-up" size="16"
-                /></span>
+                <mdicon class="icon is-small" name="chevron-up" size="16" />
               </a>
             </nav>
           </section>