switch to bootstrap icons

src/shared/components/Icon.vue

@@ -1,8 +1,46 @@
 <template>
-  <span :class="`mdi ${$slots.default[0].text}`"></span>
+  <BIcon :icon="icon"/>
 </template>
 <script lang="ts">
-  import Vue from "vue";
+  import Vue from 'vue'
+  import {
+    BIcon,
+    BIconCardText,
+    BIconMusicNoteList,
+    BIconStarFill,
+    BIconCollectionFill,
+    BIconList,
+    BIconVolumeUpFill,
+    BIconPlayFill,
+    BIconPauseFill,
+    BIconSkipStartFill,
+    BIconSkipEndFill,
+    BIconPlus,
+    BIconThreeDotsVertical,
+    BIconMusicNoteBeamed,
+    BIconBoxArrowRight,
+  } from 'bootstrap-vue'
 
-  export default Vue.extend({});
-</script>
+  export default Vue.extend({
+    components: {
+      BIcon,
+      BIconCardText,
+      BIconMusicNoteList,
+      BIconStarFill,
+      BIconCollectionFill,
+      BIconList,
+      BIconVolumeUpFill,
+      BIconPlayFill,
+      BIconPauseFill,
+      BIconSkipStartFill,
+      BIconSkipEndFill,
+      BIconPlus,
+      BIconThreeDotsVertical,
+      BIconMusicNoteBeamed,
+      BIconBoxArrowRight,
+    },
+    props: {
+      icon: { type: String }
+    },
+  })
+</script>

src/shared/components/ImgContainer.vue

@@ -3,7 +3,7 @@
     <div class="fixed-img-inner">
       <img v-if="props.src" :src="props.src">
       <div v-else class="text-muted">
-      <Icon>mdi-music</Icon>
+      <Icon icon="music-note-beamed"/>
       </div>
     </div>
   </div>

src/shared/components/OverflowMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
     <template #button-content>
-      <Icon>mdi-dots-vertical</Icon>
+      <Icon icon="three-dots-vertical"/>
     </template>
     <slot/>
   </b-dropdown>

src/shared/components/Tiles.vue

@@ -5,9 +5,7 @@
         <div class="tile-img bg-secondary">
           <div class="tile-img-inner">
             <img v-if="item.image" :src="item.image">
-            <div v-else class="fallback-img text-muted">
-              <Icon>mdi-music</Icon>
-            </div>
+            <Icon v-else class="fallback-img text-muted" icon="music-note-beamed"/>
           </div>
         </div>
         <div class="card-body">
@@ -56,13 +54,11 @@
       }
 
       .fallback-img {
-        *{
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          font-size: 4.5rem;
-        }
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 4.5rem;
       }
     }
   }