switch to bootstrap icons

src/app/Nav.vue

@@ -6,15 +6,15 @@
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'home'}">
-        <Icon>mdi-home</Icon> Home
+        <Icon icon="card-text" class="mr-2"/> Home
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'queue'}">
-        <Icon>mdi-view-list</Icon> Playing
+        <Icon icon="music-note-list" class="mr-2"/> Playing
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'starred'}">
-        <Icon>mdi-star</Icon> Starred
+        <Icon icon="star-fill" class="mr-2"/> Starred
       </router-link>
       
       <a class="nav-link disabled">
@@ -24,15 +24,15 @@
       </a>
 
       <router-link class="nav-link" :to="{name: 'albums'}">
-        <Icon>mdi-album</Icon> Albums
+        <Icon icon="collection-fill" class="mr-2"/> Albums
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'artists'}">
-        <Icon>mdi-artist</Icon> Artists
+        <Icon icon="collection-fill" class="mr-2"/> Artists
       </router-link>
 
       <router-link class="nav-item nav-link" :to="{name: 'genres'}">
-        <Icon>mdi-library-music</Icon> Genres
+        <Icon icon="collection-fill" class="mr-2"/> Genres
       </router-link>
 
       <PlaylistNav/>

src/app/TopNav.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="d-flex align-items-center mb-2">
     <button class="navbar-toggler text-white d-md-none" @click="toggleMenu">
-      <Icon>mdi-menu</Icon>
+      <Icon icon="list"/>
     </button>
 
     <div class="ml-auto"></div>
@@ -11,7 +11,7 @@
     <template v-if="username">
       <b-dropdown variant="link" right :text="username">
         <b-dropdown-item-button @click="logout">
-          <Icon>mdi-logout</Icon> Logout
+          <Icon icon="box-arrow-right"/> Logout
         </b-dropdown-item-button>
       </b-dropdown>
     </template>

src/library/TrackContextMenu.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>
     <b-dropdown-item-button @click="toggleStarred()">
       {{ starred ? 'Unstar' : 'Star' }}

src/library/TrackList.vue

@@ -18,16 +18,16 @@
         <td class="pl-0 pr-0 text-center text-muted" style="min-width: 20px; max-width: 20px;">
           <span class="track-status">
             <template v-if="item.id === playingTrackId">
-              <Icon>{{ isPlaying ? 'mdi-volume-high' : 'mdi-play' }}</Icon>
+              <Icon :icon="isPlaying ? 'volume-up-fill' : 'play-fill'"/>
             </template>
             <template v-else>{{ item.track || 1 }}</template>
           </span>
           <span class="track-status-hover">
             <span v-if="item.id === playingTrackId" @click="playPause()">
-              <Icon>{{ isPlaying ? 'mdi-pause' : 'mdi-play' }}</Icon>
+              <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
             </span>
             <span v-else @click="play(index)">
-              <Icon>mdi-play</Icon>
+              <Icon icon="play-fill"/>
             </span>
           </span>
         </td>

src/main.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from "vue-router"
 import Vuex from "vuex"
-import BootstrapVue from 'bootstrap-vue'
+import { BootstrapVue } from 'bootstrap-vue'
 import '@/style/main.scss'
 import '@/shared/components'
 import '@/shared/filters'

src/player/Player.vue

@@ -25,14 +25,14 @@
         <div class="col-auto p-0">
           <b-button variant="link" class="m-2"
               :disabled="!hasPrevious" @click="playPrevious">
-            <Icon>mdi-skip-previous</Icon>
+            <Icon icon="skip-start-fill"/>
           </b-button>
           <b-button variant="link" size="lg" class="m-2" @click="playPause">
-            <Icon>{{ isPlaying ? 'mdi-pause' : 'mdi-play' }}</Icon>
+            <Icon :icon="isPlaying ? 'pause-fill' : 'play-fill'"/>
           </b-button>
           <b-button variant="link" class="m-2"
               :disabled="!hasNext" @click="playNext">
-            <Icon>mdi-skip-next</Icon>
+            <Icon icon="skip-end-fill"/>
           </b-button>
         </div>
         <div class="col p-0 text-truncate">

src/playlist/PlaylistNav.vue

@@ -4,20 +4,20 @@
       <small class="text-uppercase text-muted font-weight-bold">
         Playlists
          <button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
-           <Icon>mdi-plus</Icon>
+           <Icon icon="plus"/>
          </button>
       </small>
     </span>
 
     <router-link class="nav-item nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
-      <Icon>mdi-view-list</Icon> Random
+      <Icon icon="music-note-list" class="mr-2"/> Random
     </router-link>
 
     <router-link v-for="item in playlists" :key="item.id"
                   :to="{name: 'playlist', params: { id: item.id }}"
                   class="nav-item nav-link">
       <span @dragover="onDragover" @drop="onDrop(item.id, $event)">
-        <Icon>mdi-playlist-music</Icon> {{ item.name }}
+        <Icon icon="music-note-list" class="mr-2"/> {{ item.name }}
       </span>
     </router-link>
 

src/playlist/RandomSongs.vue

@@ -7,8 +7,8 @@
       <tbody>
         <tr v-for="item in items" :key="item.id">
           <td>
-             <Icon @click="() => {}">mdi-play-outline</Icon>
-        <Icon @click="() => {}">mdi-plus</Icon>
+            <Icon icon="play-fill" @click="() => {}"/>
+            <Icon icon="plus" @click="() => {}"/>
           </td>
           <td>{{ item.artist }}</td>
           <td>{{ item.album }}</td>

src/search/SearchResult.vue

@@ -56,7 +56,7 @@
         <tr v-for="(item, index) in result.tracks">
           <td>
             <span  @click="play(index)">
-              <Icon>mdi-play</Icon>
+              <Icon icon="play-fill"/>
             </span>
           </td>
           <td>{{ item.title }}</td>

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;
       }
     }
   }

src/style/main.scss

@@ -1,6 +1,3 @@
-@import '~roboto-fontface/css/roboto/roboto-fontface.css';
-@import '~@mdi/font/css/materialdesignicons.css';
-
 $enable-rounded: false;
 $enable-print-styles: false;
 .breadcrumb {