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>