diff --git a/assets/fonts.css b/assets/fonts.css
index 1c2cf48d..1d434b77 100644
--- a/assets/fonts.css
+++ b/assets/fonts.css
@@ -1,19 +1,12 @@
 @font-face {
-  font-family: 'Material Icons';
+  font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
+  src: url(/fonts/MaterialSymbolsRounded.woff2) format('woff2');
 }
 
-@font-face {
-  font-family: 'Material Icons Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(/fonts/MaterialIconsOutlined-Regular.otf) format('opentype');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
+.material-symbols {
+  font-family: 'Material Symbols Rounded';
   font-weight: normal;
   font-style: normal;
   line-height: 1;
@@ -24,31 +17,14 @@
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
+  vertical-align: top;
 }
 
-.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
-  font-size: 1.5rem;
+.material-symbols.fill {
+  font-variation-settings:
+    'FILL' 1
 }
 
-.material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-}
-
-.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
-  font-size: 1.5rem;
-}
-
-
 /* cyrillic-ext */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -317,4 +293,4 @@
   font-display: swap;
   src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
\ No newline at end of file
+}
diff --git a/components/app/Appbar.vue b/components/app/Appbar.vue
index e3424b01..691c3bb6 100644
--- a/components/app/Appbar.vue
+++ b/components/app/Appbar.vue
@@ -5,7 +5,7 @@
         <img src="/Logo.png" class="h-10 w-10" />
       </nuxt-link>
       <a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center mr-2 cursor-pointer">
-        <span class="material-icons text-3xl text-fg">arrow_back</span>
+        <span class="material-symbols text-3xl text-fg">arrow_back</span>
       </a>
       <div v-if="user && currentLibrary && socketConnected">
         <div class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
@@ -21,16 +21,18 @@
       <widgets-download-progress-indicator />
 
       <!-- Must be connected to a server to cast, only supports media items on server -->
-      <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center pt-0.5" @click="castClick">
-        <span class="material-icons">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
+      <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center" @click="castClick">
+        <span class="material-symbols text-2xl leading-none">
+          {{ isCasting ? 'cast_connected' : 'cast' }}
+        </span>
       </div>
 
-      <nuxt-link v-if="user" class="h-7 mx-1.5" style="padding-top: 3px" to="/search">
-        <span class="material-icons">search</span>
+      <nuxt-link v-if="user" class="mx-1.5 flex items-center h-10" to="/search">
+        <span class="material-symbols text-2xl leading-none">search</span>
       </nuxt-link>
 
       <div class="h-7 mx-1.5">
-        <span class="material-icons" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
+        <span class="material-symbols" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
       </div>
     </div>
   </div>
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index d24bdddb..b7747f2c 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -4,13 +4,13 @@
       <div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" />
 
       <div class="top-4 left-4 absolute cursor-pointer">
-        <span class="material-icons text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">expand_more</span>
+        <span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">keyboard_arrow_down</span>
       </div>
       <div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer">
-        <span class="material-icons text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
+        <span class="material-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
       </div>
       <div class="top-6 right-4 absolute cursor-pointer">
-        <span class="material-icons text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
+        <span class="material-symbols text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
       <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight }" style="font-size: 10px">{{ isDirectPlayMethod ? $strings.LabelPlaybackDirect : isLocalPlayMethod ? $strings.LabelPlaybackLocal : $strings.LabelPlaybackTranscode }}</p>
     </div>
@@ -36,7 +36,7 @@
       </div>
 
       <div v-if="syncStatus === $constants.SyncStatus.FAILED" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-30" @click.stop="showSyncsFailedDialog">
-        <span class="material-icons text-error text-3xl">error</span>
+        <span class="material-symbols text-error text-3xl">error</span>
       </div>
     </div>
 
@@ -50,9 +50,9 @@
     <div id="playerContent" class="playerContainer w-full z-20 absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" :style="{ backgroundColor: showFullscreen ? '' : coverRgb }" @click="clickContainer">
       <div v-if="showFullscreen" class="absolute bottom-4 left-0 right-0 w-full pb-4 pt-2 mx-auto px-6" style="max-width: 414px">
         <div class="flex items-center justify-between pointer-events-auto">
-          <span v-if="!isPodcast && serverLibraryItemId && socketConnected" class="material-icons text-3xl text-fg-muted cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
+          <span v-if="!isPodcast && serverLibraryItemId && socketConnected" class="material-symbols text-3xl text-fg-muted cursor-pointer" :class="{ fill: bookmarks.length }" @click="$emit('showBookmarks')">bookmark</span>
           <!-- hidden for podcasts but still using this as a placeholder -->
-          <span v-else class="material-icons text-3xl text-white text-opacity-0">bookmark</span>
+          <span v-else class="material-symbols text-3xl text-white text-opacity-0">bookmark</span>
 
           <span class="font-mono text-fg-muted cursor-pointer" style="font-size: 1.35rem" @click="$emit('selectPlaybackSpeed')">{{ currentPlaybackRate }}x</span>
           <svg v-if="!sleepTimerRunning" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-fg-muted cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" @click.stop="$emit('showSleepTimer')">
@@ -62,23 +62,23 @@
             <p class="text-xl font-mono text-success">{{ sleepTimeRemainingPretty }}</p>
           </div>
 
-          <span class="material-icons text-3xl text-fg cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="clickChaptersBtn">format_list_bulleted</span>
+          <span class="material-symbols text-3xl text-fg cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="clickChaptersBtn">format_list_bulleted</span>
         </div>
       </div>
       <div v-else class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-minimized-audio-player)" />
 
       <div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
         <div class="flex items-center max-w-full" :class="playerSettings.lockUi ? 'justify-center' : 'justify-between'">
-          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-icons next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
-          <span v-show="!playerSettings.lockUi" class="material-icons jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
+          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
+          <span v-show="!playerSettings.lockUi" class="material-symbols jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
           <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
             <div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
 
-            <span v-if="!isLoading" class="material-icons" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
+            <span v-if="!isLoading" class="material-symbols fill" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
             <widgets-spinner-icon v-else class="h-8 w-8" />
           </div>
-          <span v-show="!playerSettings.lockUi" class="material-icons jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
-          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-icons next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
+          <span v-show="!playerSettings.lockUi" class="material-symbols jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
+          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
         </div>
       </div>
 
@@ -1106,7 +1106,7 @@ export default {
   min-height: 40px;
   margin: 0px 7px;
 }
-#playerControls .play-btn .material-icons {
+#playerControls .play-btn .material-symbols {
   transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
   transition-property: font-size;
 
@@ -1142,7 +1142,7 @@ export default {
   min-width: 65px;
   min-height: 65px;
 }
-.fullscreen #playerControls .play-btn .material-icons {
+.fullscreen #playerControls .play-btn .material-symbols {
   font-size: 2.1rem;
 }
 </style>
diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index a2724997..3f8624d2 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -12,11 +12,11 @@
       <div class="w-full overflow-y-auto">
         <template v-for="item in navItems">
           <button v-if="item.action" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg-muted" @click="clickAction(item.action)">
-            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <span class="material-symbols fill text-lg">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </button>
           <nuxt-link v-else :to="item.to" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg-hover/50' : 'text-fg-muted'">
-            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <span class="material-symbols fill text-lg">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </nuxt-link>
         </template>
@@ -30,7 +30,7 @@
           <div class="flex-grow" />
           <div v-if="user" class="flex items-center" @click="disconnect">
             <p class="text-xs pr-2">{{ $strings.ButtonDisconnect }}</p>
-            <i class="material-icons text-sm -mb-0.5">cloud_off</i>
+            <i class="material-symbols text-sm -mb-0.5">cloud_off</i>
           </div>
         </div>
       </div>
diff --git a/components/cards/LazyBookCard.vue b/components/cards/LazyBookCard.vue
index b1d10c4b..86c3bccb 100644
--- a/components/cards/LazyBookCard.vue
+++ b/components/cards/LazyBookCard.vue
@@ -43,14 +43,14 @@
 
       <div v-if="showPlayButton" class="absolute -bottom-16 -right-16 rotate-45 w-32 h-32 p-2 bg-gradient-to-r from-transparent to-black to-40% inline-flex justify-start items-center">
         <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto -rotate-45" @click.stop.prevent="play">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
+          <span class="material-symbols fill">{{ streamIsPlaying ? 'pause_circle' : 'play_circle' }}</span>
         </div>
       </div>
     </div>
 
     <!-- Play/pause button for podcast episode -->
     <div v-if="recentEpisode" class="absolute z-10 top-0 left-0 bottom-0 right-0 m-auto flex items-center justify-center w-12 h-12 rounded-full" :class="{ 'bg-white/70': !playerIsStartingForThisMedia }" @click.stop="playEpisode">
-      <span v-if="!playerIsStartingForThisMedia" class="material-icons text-6xl text-black/80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
+      <span v-if="!playerIsStartingForThisMedia" class="material-symbols fill text-6xl text-black/80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle' }}</span>
       <div v-else class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black/80 rounded-full overflow-hidden">
         <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
           <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
@@ -63,17 +63,17 @@
 
     <!-- Downloaded icon -->
     <div v-if="showHasLocalDownload" class="absolute right-0 top-0 z-20" :style="{ top: (isPodcast || (seriesSequence && showSequence) ? 1.75 : 0.375) * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <span class="material-icons text-2xl text-success">{{ 'download_done' }}</span>
+      <span class="material-symbols text-2xl text-success">download_done</span>
     </div>
 
     <!-- Error widget -->
     <div v-if="showError" :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300 absolute bottom-4 left-0 z-10">
-      <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+      <span class="material-symbols text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
     </div>
 
     <!-- rss feed icon -->
     <div v-if="rssFeed" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
-      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
+      <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
     </div>
 
     <!-- Series sequence -->
diff --git a/components/cards/LazyListBookCard.vue b/components/cards/LazyListBookCard.vue
index fd670910..fc3a1d38 100644
--- a/components/cards/LazyListBookCard.vue
+++ b/components/cards/LazyListBookCard.vue
@@ -31,7 +31,7 @@
       </div>
 
       <div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-        <span class="material-icons text-2xl text-success">{{ 'download_done' }}</span>
+        <span class="material-symbols text-2xl text-success">download_done</span>
       </div>
     </div>
   </div>
diff --git a/components/cards/NarratorSearchCard.vue b/components/cards/NarratorSearchCard.vue
index e147e079..29db17a3 100644
--- a/components/cards/NarratorSearchCard.vue
+++ b/components/cards/NarratorSearchCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
     <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-icons text-2xl text-gray-200">record_voice_over</span>
+      <span class="material-symbols text-2xl text-gray-200">record_voice_over</span>
     </div>
     <div class="flex-grow px-2 narratorSearchCardContent h-full">
       <p class="truncate text-sm">{{ narrator }}</p>
@@ -31,4 +31,4 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/cards/TagSearchCard.vue b/components/cards/TagSearchCard.vue
index 3f3d689a..10cdfe3a 100644
--- a/components/cards/TagSearchCard.vue
+++ b/components/cards/TagSearchCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
     <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-icons text-2xl text-fg">local_offer</span>
+      <span class="material-symbols fill text-2xl text-fg">sell</span>
     </div>
     <div class="flex-grow px-2 tagSearchCardContent h-full">
       <p class="truncate text-sm">{{ tag }}</p>
@@ -31,4 +31,4 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/connection/ServerConnectForm.vue b/components/connection/ServerConnectForm.vue
index 08eb30b6..0c35b158 100644
--- a/components/connection/ServerConnectForm.vue
+++ b/components/connection/ServerConnectForm.vue
@@ -5,11 +5,11 @@
       <template v-if="!showForm">
         <div v-for="config in serverConnectionConfigs" :key="config.id" class="border-b border-fg/10 py-4">
           <div class="flex items-center my-1 relative" @click="connectToServer(config)">
-            <span class="material-icons-outlined text-xl text-fg-muted">dns</span>
+            <span class="material-symbols text-xl text-fg-muted">dns</span>
             <p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p>
 
             <div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)">
-              <span class="material-icons text-lg text-fg-muted">more_vert</span>
+              <span class="material-symbols text-2xl text-fg-muted">more_vert</span>
             </div>
           </div>
           <!-- warning message if server connection config is using an old user id -->
@@ -27,7 +27,7 @@
         <!-- server address input -->
         <form v-if="!showAuth" @submit.prevent="submit" novalidate class="w-full">
           <div v-if="serverConnectionConfigs.length" class="flex items-center mb-4" @click="showServerList">
-            <span class="material-icons text-fg-muted">arrow_back</span>
+            <span class="material-symbols text-fg-muted">arrow_back</span>
           </div>
           <h2 class="text-lg leading-7 mb-2">{{ $strings.LabelServerAddress }}</h2>
           <ui-text-input v-model="serverConfig.address" :disabled="processing || !networkConnected || !!serverConfig.id" placeholder="http://55.55.55.55:13378" type="url" class="w-full h-10" />
@@ -38,13 +38,13 @@
         <!-- username/password and auth methods -->
         <template v-else>
           <div v-if="serverConfig.id" class="flex items-center mb-4" @click="showServerList">
-            <span class="material-icons text-fg-muted">arrow_back</span>
+            <span class="material-symbols text-fg-muted">arrow_back</span>
           </div>
 
           <div class="flex items-center">
             <p class="text-fg-muted">{{ serverConfig.address }}</p>
             <div class="flex-grow" />
-            <span v-if="!serverConfig.id" class="material-icons" style="font-size: 1.1rem" @click="editServerAddress">edit</span>
+            <span v-if="!serverConfig.id" class="material-symbols" style="font-size: 1.1rem" @click="editServerAddress">edit</span>
           </div>
           <div class="w-full h-px bg-fg/10 my-2" />
           <form v-if="isLocalAuthEnabled" @submit.prevent="submitAuth" class="pt-3">
@@ -64,7 +64,7 @@
 
       <!-- auth error message -->
       <div v-show="error" class="w-full rounded-lg bg-red-600 bg-opacity-10 border border-error border-opacity-50 py-3 px-2 flex items-center mt-4">
-        <span class="material-icons mr-2 text-error" style="font-size: 1.1rem">warning</span>
+        <span class="material-symbols mr-2 text-error" style="font-size: 1.1rem">warning</span>
         <p class="text-error">{{ error }}</p>
       </div>
     </div>
diff --git a/components/covers/PreviewCover.vue b/components/covers/PreviewCover.vue
index aab610de..d49d2716 100644
--- a/components/covers/PreviewCover.vue
+++ b/components/covers/PreviewCover.vue
@@ -7,7 +7,7 @@
       <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
 
       <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
-        <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
+        <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
       </a>
     </div>
 
@@ -100,4 +100,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/home/BookshelfNavBar.vue b/components/home/BookshelfNavBar.vue
index 0d04dfe6..1bfb4b8d 100644
--- a/components/home/BookshelfNavBar.vue
+++ b/components/home/BookshelfNavBar.vue
@@ -62,7 +62,7 @@ export default {
           items.push({
             to: '/bookshelf/add-podcast',
             routeName: 'bookshelf-add-podcast',
-            iconPack: 'material-icons',
+            iconPack: 'material-symbols',
             icon: 'podcasts',
             iconClass: 'text-xl',
             text: this.$strings.ButtonAdd
@@ -97,7 +97,7 @@ export default {
           {
             to: '/bookshelf/collections',
             routeName: 'bookshelf-collections',
-            iconPack: 'material-icons-outlined',
+            iconPack: 'material-symbols',
             icon: 'collections_bookmark',
             iconClass: 'text-xl',
             text: this.$strings.ButtonCollections
@@ -117,8 +117,9 @@ export default {
         items.push({
           to: '/bookshelf/playlists',
           routeName: 'bookshelf-playlists',
-          iconPack: 'material-icons',
+          iconPack: 'material-symbols',
           icon: 'queue_music',
+          iconClass: 'text-2xl',
           text: this.$strings.ButtonPlaylists
         })
       }
@@ -149,4 +150,4 @@ export default {
 #bookshelf-navbar a {
   font-size: 0.9rem;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/home/BookshelfToolbar.vue b/components/home/BookshelfToolbar.vue
index 98cbb86d..5e48b3f4 100644
--- a/components/home/BookshelfToolbar.vue
+++ b/components/home/BookshelfToolbar.vue
@@ -5,16 +5,16 @@
         <p v-show="!selectedSeriesName" class="pt-1">{{ $formatNumber(totalEntities) }} {{ entityTitle }}</p>
         <p v-show="selectedSeriesName" class="ml-2 pt-1">{{ selectedSeriesName }} ({{ $formatNumber(totalEntities) }})</p>
         <div class="flex-grow" />
-        <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
+        <span v-if="page == 'library' || seriesBookPage" class="material-symbols text-2xl px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
           <div class="relative flex items-center px-2">
-            <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
+            <span class="material-symbols text-2xl" @click="showFilterModal = true">filter_alt</span>
             <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
           </div>
-          <span class="material-icons px-2" @click="showSortModal = true">sort</span>
+          <span class="material-symbols text-2xl px-2" @click="showSortModal = true">sort</span>
         </template>
-        <span v-if="seriesBookPage" class="material-icons px-2" @click="downloadSeries">download</span>
-        <span v-if="(page == 'library' && isBookLibrary) || seriesBookPage" class="material-icons px-2" @click="showMoreMenuDialog = true">more_vert</span>
+        <span v-if="seriesBookPage" class="material-symbols text-2xl px-2" @click="downloadSeries">download</span>
+        <span v-if="(page == 'library' && isBookLibrary) || seriesBookPage" class="material-symbols text-2xl px-2" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
     </div>
 
diff --git a/components/modals/AutoSleepTimerRewindLengthModal.vue b/components/modals/AutoSleepTimerRewindLengthModal.vue
index 423827cb..b32ecb43 100644
--- a/components/modals/AutoSleepTimerRewindLengthModal.vue
+++ b/components/modals/AutoSleepTimerRewindLengthModal.vue
@@ -6,22 +6,25 @@
       </div>
     </template>
 
-    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="
+    <div
+      class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center"
+      @click="
         show = false
         manualTimerModal = false
-      ">
+      "
+    >
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <div class="flex my-2 justify-between">
             <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px">
-              <span class="material-icons">remove</span>
+              <span class="material-symbols">remove</span>
             </ui-btn>
             <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
             <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px">
-              <span class="material-icons">add</span>
+              <span class="material-symbols">add</span>
             </ui-btn>
           </div>
           <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>
diff --git a/components/modals/BookmarksModal.vue b/components/modals/BookmarksModal.vue
index ed92341d..5d91bcf8 100644
--- a/components/modals/BookmarksModal.vue
+++ b/components/modals/BookmarksModal.vue
@@ -10,7 +10,7 @@
         <div class="w-full h-full p-4" v-if="showBookmarkTitleInput">
           <div class="flex mb-4 items-center">
             <div class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-white hover:bg-opacity-10 cursor-pointer" @click.stop="showBookmarkTitleInput = false">
-              <span class="material-icons text-3xl">arrow_back</span>
+              <span class="material-symbols text-3xl">arrow_back</span>
             </div>
             <p class="text-xl pl-2">{{ selectedBookmark ? 'Edit Bookmark' : 'New Bookmark' }}</p>
             <div class="flex-grow" />
@@ -31,7 +31,7 @@
           </div>
         </div>
         <div v-if="canCreateBookmark && !showBookmarkTitleInput" class="flex px-4 py-2 items-center text-center justify-between border-b border-fg/10 bg-success cursor-pointer text-white text-opacity-80 sticky bottom-0 left-0 w-full" @click.stop="createBookmark">
-          <span class="material-icons">add</span>
+          <span class="material-symbols">add</span>
           <p class="text-base pl-2">{{ $strings.ButtonCreateBookmark }}</p>
           <p class="text-sm font-mono">{{ this.$secondsToTimestamp(currentTime / _playbackRate) }}</p>
         </div>
diff --git a/components/modals/CustomHeadersModal.vue b/components/modals/CustomHeadersModal.vue
index b2df36ef..913eabc8 100644
--- a/components/modals/CustomHeadersModal.vue
+++ b/components/modals/CustomHeadersModal.vue
@@ -25,7 +25,7 @@
               <p class="text-sm text-gray-400">{{ value }}</p>
 
               <div class="absolute top-0 bottom-0 right-0 h-full p-4 flex items-center justify-center text-error">
-                <button @click="removeHeader(key)"><span class="material-icons text-lg">delete</span></button>
+                <button @click="removeHeader(key)"><span class="material-symbols text-lg">delete</span></button>
               </div>
             </div>
           </template>
diff --git a/components/modals/Dialog.vue b/components/modals/Dialog.vue
index 814f43ea..6543f0ec 100644
--- a/components/modals/Dialog.vue
+++ b/components/modals/Dialog.vue
@@ -13,7 +13,7 @@
             <slot :name="item.value" :item="item" :selected="item.value === selected">
               <li :key="item.value" :ref="`item-${item.value}`" class="text-fg select-none relative cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" :style="{ paddingTop: itemPaddingY, paddingBottom: itemPaddingY }" role="option" @click="clickedOption(item.value)">
                 <div class="relative flex items-center px-3">
-                  <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-fg text-opacity-80">{{ item.icon }}</span>
+                  <span v-if="item.icon" class="material-symbols text-xl mr-2 text-fg text-opacity-80">{{ item.icon }}</span>
                   <p class="font-normal block truncate text-base text-fg text-opacity-80">{{ item.text }}</p>
                 </div>
               </li>
diff --git a/components/modals/FilterModal.vue b/components/modals/FilterModal.vue
index d6403879..7664e768 100644
--- a/components/modals/FilterModal.vue
+++ b/components/modals/FilterModal.vue
@@ -14,7 +14,7 @@
                 <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
               </div>
               <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
-                <span class="material-icons text-2xl">arrow_right</span>
+                <span class="material-symbols text-2xl">arrow_right</span>
               </div>
             </li>
           </template>
@@ -22,7 +22,7 @@
         <ul v-show="sublist" class="h-full w-full rounded-lg" role="listbox" aria-labelledby="listbox-label">
           <li class="text-fg select-none relative py-3 pl-9 cursor-pointer" role="option" @click="sublist = null">
             <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
-              <span class="material-icons text-2xl">arrow_left</span>
+              <span class="material-symbols text-2xl">arrow_left</span>
             </div>
             <div class="flex items-center justify-between">
               <span class="font-normal ml-3 block truncate text-lg">{{ $strings.ButtonBack }}</span>
diff --git a/components/modals/Modal.vue b/components/modals/Modal.vue
index 44639f26..bb2a56da 100644
--- a/components/modals/Modal.vue
+++ b/components/modals/Modal.vue
@@ -3,7 +3,7 @@
     <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" />
 
     <div class="absolute z-40 top-11 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
-      <span class="material-icons text-4xl">close</span>
+      <span class="material-symbols text-4xl">close</span>
     </div>
     <slot name="outer" />
     <div ref="content" style="min-height: 200px" class="relative text-fg max-h-screen" :style="{ height: modalHeight, width: modalWidth, maxWidth: maxWidth }" v-click-outside="clickBg">
@@ -110,4 +110,4 @@ export default {
     this.$eventBus.$off('close-modal', this.closeModalEvt)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/modals/OrderModal.vue b/components/modals/OrderModal.vue
index 787eaffd..6bd303d4 100644
--- a/components/modals/OrderModal.vue
+++ b/components/modals/OrderModal.vue
@@ -8,7 +8,7 @@
               <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
             </div>
             <span v-if="item.value === selected" class="text-yellow-300 absolute inset-y-0 right-0 flex items-center pr-4">
-              <span class="material-icons text-3xl">{{ descending ? 'south' : 'north' }}</span>
+              <span class="material-symbols text-3xl">{{ descending ? 'south' : 'north' }}</span>
             </span>
           </li>
         </template>
diff --git a/components/modals/PlaybackSpeedModal.vue b/components/modals/PlaybackSpeedModal.vue
index 109527bb..f61903ec 100644
--- a/components/modals/PlaybackSpeedModal.vue
+++ b/components/modals/PlaybackSpeedModal.vue
@@ -19,13 +19,13 @@
         </ul>
         <div class="flex items-center justify-center py-3 border-t border-fg/10">
           <button :disabled="!canDecrement" @click="decrement" class="icon-num-btn w-8 h-8 text-fg-muted rounded border border-border flex items-center justify-center">
-            <span class="material-icons">remove</span>
+            <span class="material-symbols">remove</span>
           </button>
           <div class="w-24 text-center">
             <p class="text-xl">{{ playbackRate }}<span class="text-lg">⨯</span></p>
           </div>
           <button :disabled="!canIncrement" @click="increment" class="icon-num-btn w-8 h-8 text-fg-muted rounded border border-border flex items-center justify-center">
-            <span class="material-icons">add</span>
+            <span class="material-symbols">add</span>
           </button>
         </div>
       </div>
@@ -118,4 +118,4 @@ button.icon-num-btn:disabled::before {
 button.icon-num-btn:disabled span {
   color: #777;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modals/PodcastEpisodesFeedModal.vue b/components/modals/PodcastEpisodesFeedModal.vue
index da34649b..cca9a083 100644
--- a/components/modals/PodcastEpisodesFeedModal.vue
+++ b/components/modals/PodcastEpisodesFeedModal.vue
@@ -10,7 +10,7 @@
         <template v-for="(episode, index) in episodes">
           <div :key="index" class="relative" :class="itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'bg-success bg-opacity-10' : index % 2 == 0 ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-5'" @click="selectEpisode(episode, index)">
             <div class="absolute top-0 left-0 h-full flex items-center p-2">
-              <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
+              <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-symbols text-success text-xl">download_done</span>
               <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
             </div>
             <div class="pl-9 pr-2 py-2 border-b border-white border-opacity-10">
@@ -134,4 +134,4 @@ export default {
   max-height: calc(100vh - 150px);
   margin-top: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modals/SelectLocalFolderModal.vue b/components/modals/SelectLocalFolderModal.vue
index db088e71..87613a30 100644
--- a/components/modals/SelectLocalFolderModal.vue
+++ b/components/modals/SelectLocalFolderModal.vue
@@ -12,7 +12,7 @@
           <template v-for="folder in localFolders">
             <li :key="folder.id" :id="`folder-${folder.id}`" class="text-fg select-none relative py-5" role="option" @click="clickedOption(folder)">
               <div class="relative flex items-center pl-3" style="padding-right: 4.5rem">
-                <span class="material-icons-outlined text-xl mr-2 text-fg text-opacity-80">folder</span>
+                <span class="material-symbols text-xl mr-2 text-fg text-opacity-80">folder</span>
                 <p class="font-normal block truncate text-sm text-fg text-opacity-80">{{ folder.name }}</p>
               </div>
             </li>
diff --git a/components/modals/SleepTimerLengthModal.vue b/components/modals/SleepTimerLengthModal.vue
index bad7252f..1e399eac 100644
--- a/components/modals/SleepTimerLengthModal.vue
+++ b/components/modals/SleepTimerLengthModal.vue
@@ -16,12 +16,12 @@
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <div class="flex my-2 justify-between">
-            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">remove</span></ui-btn>
             <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
-            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">add</span></ui-btn>
           </div>
           <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>
         </div>
diff --git a/components/modals/SleepTimerModal.vue b/components/modals/SleepTimerModal.vue
index dbf2c43d..9e74b11c 100644
--- a/components/modals/SleepTimerModal.vue
+++ b/components/modals/SleepTimerModal.vue
@@ -10,12 +10,12 @@
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-border" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <div class="flex my-2 justify-between">
-            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">remove</span></ui-btn>
             <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
-            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">add</span></ui-btn>
           </div>
           <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>
         </div>
@@ -40,9 +40,9 @@
         </ul>
         <div v-else class="p-4">
           <div class="flex my-2 justify-between">
-            <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">remove</span></ui-btn>
             <p class="text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
-            <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+            <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">add</span></ui-btn>
           </div>
 
           <ui-btn @click="cancelSleepTimer" class="w-full">{{ isAuto ? $strings.ButtonDisableAutoTimer : $strings.ButtonCancelTimer }}</ui-btn>
diff --git a/components/modals/bookmarks/BookmarkItem.vue b/components/modals/bookmarks/BookmarkItem.vue
index 65234c7b..19421a34 100644
--- a/components/modals/bookmarks/BookmarkItem.vue
+++ b/components/modals/bookmarks/BookmarkItem.vue
@@ -2,16 +2,16 @@
   <div :key="bookmark.time" :id="`bookmark-row-${bookmark.time}`" class="flex items-center px-1 py-4 justify-start relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
     <div class="flex-grow overflow-hidden px-2">
       <div class="flex items-center mb-0.5">
-        <i class="material-icons text-lg pr-1 -mb-1" :class="highlight ? 'text-success' : 'text-fg-muted'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</i>
+        <i class="material-symbols text-lg pr-1 -mb-1" :class="{ 'text-success fill': highlight, 'text-fg-muted': !highlight }">bookmark</i>
         <p class="truncate text-sm">
           {{ bookmark.title }}
         </p>
       </div>
-      <p class="text-sm font-mono text-fg-muted flex items-center"><span class="material-icons text-base pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time / playbackRate) }}</p>
+      <p class="text-sm font-mono text-fg-muted flex items-center"><span class="material-symbols text-base pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time / playbackRate) }}</p>
     </div>
     <div class="h-full flex items-center justify-end transform w-16 pr-2" @click.stop>
-      <span class="material-icons text-2xl mr-2 text-fg hover:text-yellow-400" @click.stop="editClick">edit</span>
-      <span class="material-icons text-2xl text-fg hover:text-error" @click.stop="deleteClick">delete</span>
+      <span class="material-symbols text-2xl mr-2 text-fg hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-symbols text-2xl text-fg hover:text-error" @click.stop="deleteClick">delete</span>
     </div>
   </div>
 </template>
@@ -42,4 +42,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/modals/downloads/DownloadItem.vue b/components/modals/downloads/DownloadItem.vue
index 679de08f..1596653f 100644
--- a/components/modals/downloads/DownloadItem.vue
+++ b/components/modals/downloads/DownloadItem.vue
@@ -9,13 +9,13 @@
     </div>
     <div class="flex-grow" />
     <div v-if="download.isIncomplete || download.isMissing" class="shadow-sm text-warning flex items-center justify-center rounded-full mr-4">
-      <span class="material-icons">error_outline</span>
+      <span class="material-symbols">error_outline</span>
     </div>
     <button v-if="!isMissing" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="playDownload">
-      <span class="material-icons" style="font-size: 2rem">play_arrow</span>
+      <span class="material-symbols fill" style="font-size: 2rem">play_arrow</span>
     </button>
     <div class="shadow-sm text-error flex items-center justify-center rounded-ful ml-4" @click.stop="clickDelete">
-      <span class="material-icons" style="font-size: 1.2rem">delete</span>
+      <span class="material-symbols" style="font-size: 1.2rem">delete</span>
     </div>
   </div>
 </template>
@@ -49,4 +49,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/modals/playlists/AddCreateModal.vue b/components/modals/playlists/AddCreateModal.vue
index 80718950..82d8f63a 100644
--- a/components/modals/playlists/AddCreateModal.vue
+++ b/components/modals/playlists/AddCreateModal.vue
@@ -3,7 +3,7 @@
     <div class="flex items-end justify-between h-24 px-4 pb-2">
       <h1 class="text-lg">{{ $strings.LabelAddToPlaylist }}</h1>
       <button class="flex" @click="show = false">
-        <span class="material-icons">close</span>
+        <span class="material-symbols">close</span>
       </button>
     </div>
 
@@ -12,7 +12,7 @@
       <div class="w-full px-4">
         <div class="flex mb-4 items-center">
           <div class="w-9 h-9 flex items-center justify-center rounded-full cursor-pointer" @click.stop="showPlaylistNameInput = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <p class="text-xl pl-2 leading-none">{{ $strings.HeaderNewPlaylist }}</p>
           <div class="flex-grow" />
diff --git a/components/modals/rssfeeds/RssFeedModal.vue b/components/modals/rssfeeds/RssFeedModal.vue
index e7e23576..97b11a0f 100644
--- a/components/modals/rssfeeds/RssFeedModal.vue
+++ b/components/modals/rssfeeds/RssFeedModal.vue
@@ -3,7 +3,7 @@
     <div class="flex items-end justify-end h-24 pr-4 pb-2">
       <!-- <h1 class="text-lg">RSS Feed</h1> -->
       <button class="flex" @click="show = false">
-        <span class="material-icons">close</span>
+        <span class="material-symbols">close</span>
       </button>
     </div>
 
@@ -14,7 +14,7 @@
 
           <ui-text-input v-model="currentFeed.feedUrl" class="text-sm" readonly />
 
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base" :class="linkCopied ? 'text-success' : 'text-fg-muted'" @click="copyToClipboard(currentFeed.feedUrl)">{{ linkCopied ? 'done' : 'content_copy' }}</span>
+          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base" :class="linkCopied ? 'text-success' : 'text-fg-muted'" @click="copyToClipboard(currentFeed.feedUrl)">{{ linkCopied ? 'check' : 'content_copy' }}</span>
         </div>
 
         <div v-if="currentFeed.meta" class="mt-5">
diff --git a/components/readers/PdfReader.vue b/components/readers/PdfReader.vue
index 88544c7c..8a163719 100644
--- a/components/readers/PdfReader.vue
+++ b/components/readers/PdfReader.vue
@@ -2,12 +2,12 @@
   <div class="w-full h-full relative">
     <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
       <div class="flex items-center justify-center h-full w-1/2">
-        <span class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
+        <span class="material-symbols text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
       </div>
     </div>
     <div v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
       <div class="flex items-center justify-center h-full w-1/2 ml-auto">
-        <span class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
+        <span class="material-symbols text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
       </div>
     </div>
 
diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
index 08edb805..137457a4 100644
--- a/components/readers/Reader.vue
+++ b/components/readers/Reader.vue
@@ -4,17 +4,17 @@
     <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-fg" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" :style="{ boxShadow: showingToolbar ? '0px 8px 8px #11111155' : '' }" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
       <div class="flex items-center mb-2">
         <button type="button" class="inline-flex mx-2" @click.stop="show = false">
-          <span class="material-icons-outlined text-3xl text-fg">chevron_left</span>
+          <span class="material-symbols text-3xl text-fg">chevron_left</span>
         </button>
         <div class="flex-grow" />
         <button v-if="isComic || isEpub" type="button" class="inline-flex mx-2" @click.stop="clickTOCBtn">
-          <span class="material-icons-outlined text-2xl text-fg">format_list_bulleted</span>
+          <span class="material-symbols text-2xl text-fg">format_list_bulleted</span>
         </button>
         <button v-if="isEpub" type="button" class="inline-flex mx-2" @click.stop="clickSettingsBtn">
-          <span class="material-icons text-2xl text-fg">settings</span>
+          <span class="material-symbols text-2xl text-fg">settings</span>
         </button>
         <button v-if="comicHasMetadata" type="button" class="inline-flex mx-2" @click.stop="clickMetadataBtn">
-          <span class="material-icons text-2xl text-fg">more</span>
+          <span class="material-symbols text-2xl text-fg">more-vert</span>
         </button>
       </div>
 
@@ -29,7 +29,7 @@
       <div class="flex items-end justify-between h-20 px-4 pb-2">
         <h1 class="text-lg">{{ $strings.HeaderTableOfContents }}</h1>
         <button class="flex" @click.stop="showTOCModal = false">
-          <span class="material-icons">close</span>
+          <span class="material-symbols">close</span>
         </button>
       </div>
 
@@ -59,7 +59,7 @@
         <div class="flex items-end justify-between h-14 px-4 pb-2 mb-6">
           <h1 class="text-lg">{{ $strings.HeaderEreaderSettings }}</h1>
           <button class="flex" @click="showSettingsModal = false">
-            <span class="material-icons">close</span>
+            <span class="material-symbols">close</span>
           </button>
         </div>
         <div class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(75vh-85px)]">
diff --git a/components/stats/YearInReview.vue b/components/stats/YearInReview.vue
index 4e04ec07..0433a23f 100644
--- a/components/stats/YearInReview.vue
+++ b/components/stats/YearInReview.vue
@@ -75,7 +75,7 @@ export default {
 
       const addIcon = (icon, color, fontSize, x, y) => {
         ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.font = `${fontSize} Material Symbols Rounded`
         ctx.fillText(icon, x, y)
       }
 
diff --git a/components/stats/YearInReviewBanner.vue b/components/stats/YearInReviewBanner.vue
index 28c95963..7e43fe88 100644
--- a/components/stats/YearInReviewBanner.vue
+++ b/components/stats/YearInReviewBanner.vue
@@ -2,7 +2,7 @@
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-2 sm:p-4 mb-4">
     <!-- hack to get icon fonts loaded on init -->
     <div class="h-0 w-0 overflow-hidden opacity-0">
-      <span class="material-icons-outlined">close</span>
+      <span class="material-symbols">close</span>
       <span class="abs-icons icon-audiobookshelf" />
     </div>
 
@@ -19,7 +19,7 @@
       <div class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
         <!-- previous button -->
         <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
-          <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+          <span class="material-symbols text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
           <span class="hidden sm:inline-block pr-2">Previous</span>
         </ui-btn>
         <!-- share button -->
@@ -33,12 +33,12 @@
         <!-- refresh button -->
         <ui-btn small :disabled="processingYearInReview" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReview">
           <span class="hidden sm:inline-block">Refresh</span>
-          <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+          <span class="material-symbols sm:!hidden text-lg py-px">refresh</span>
         </ui-btn>
         <!-- next button -->
         <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
           <span class="hidden sm:inline-block pl-2">Next</span>
-          <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+          <span class="material-symbols text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
         </ui-btn>
       </div>
       <stats-year-in-review ref="yearInReview" :variant="yearInReviewVariant" :year="yearInReviewYear" :processing.sync="processingYearInReview" />
@@ -55,7 +55,7 @@
         <div class="flex items-center justify-center mb-2">
           <!-- previous button -->
           <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
-            <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+            <span class="material-symbols text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
             <span class="hidden sm:inline-block pr-2">Previous</span>
           </ui-btn>
           <!-- share button -->
@@ -69,12 +69,12 @@
           <!-- refresh button -->
           <ui-btn small :disabled="processingYearInReviewServer" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReviewServer">
             <span class="hidden sm:inline-block">Refresh</span>
-            <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+            <span class="material-symbols sm:!hidden text-lg py-px">refresh</span>
           </ui-btn>
           <!-- next button -->
           <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
             <span class="hidden sm:inline-block pl-2">Next</span>
-            <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+            <span class="material-symbols text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
           </ui-btn>
         </div>
       </div>
@@ -131,4 +131,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/stats/YearInReviewShort.vue b/components/stats/YearInReviewShort.vue
index ae77e987..422d8eb5 100644
--- a/components/stats/YearInReviewShort.vue
+++ b/components/stats/YearInReviewShort.vue
@@ -66,7 +66,7 @@ export default {
 
       const addIcon = (icon, color, fontSize, x, y) => {
         ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.font = `${fontSize} Material Symbols Rounded`
         ctx.fillText(icon, x, y)
       }
 
diff --git a/components/tables/ChaptersTable.vue b/components/tables/ChaptersTable.vue
index 95e60cd7..2144706b 100644
--- a/components/tables/ChaptersTable.vue
+++ b/components/tables/ChaptersTable.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="flex-grow" />
       <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
-        <span class="material-icons text-3xl">expand_more</span>
+        <span class="material-symbols text-3xl">arrow_drop_down</span>
       </div>
     </div>
     <transition name="slide">
diff --git a/components/tables/TracksTable.vue b/components/tables/TracksTable.vue
index 4ada98f0..bf189ed1 100644
--- a/components/tables/TracksTable.vue
+++ b/components/tables/TracksTable.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="flex-grow" />
       <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
-        <span class="material-icons text-3xl">expand_more</span>
+        <span class="material-symbols text-3xl">arrow_drop_down</span>
       </div>
     </div>
     <transition name="slide">
diff --git a/components/tables/collection/BookTableRow.vue b/components/tables/collection/BookTableRow.vue
index 9d722f84..98289835 100644
--- a/components/tables/collection/BookTableRow.vue
+++ b/components/tables/collection/BookTableRow.vue
@@ -6,14 +6,14 @@
       </div>
       <div class="book-table-content h-full px-2 flex items-center">
         <div class="max-w-full">
-          <p class="truncate block text-sm">{{ bookTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
+          <p class="truncate block text-sm">{{ bookTitle }} <span v-if="localLibraryItem" class="material-symbols text-success text-base align-text-bottom">download_done</span></p>
           <p class="truncate block text-fg-muted text-xs">{{ bookAuthor }}</p>
           <p v-if="media.duration" class="text-xxs text-fg-muted">{{ bookDuration }}</p>
         </div>
       </div>
       <div class="w-8 min-w-8 flex justify-center">
         <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
-          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <span class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
         </button>
       </div>
     </nuxt-link>
@@ -120,4 +120,4 @@ export default {
   width: calc(100% - 82px);
   max-width: calc(100% - 82px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/tables/ebook/EbookFilesTable.vue b/components/tables/ebook/EbookFilesTable.vue
index ab51fc0d..39ab9b6e 100644
--- a/components/tables/ebook/EbookFilesTable.vue
+++ b/components/tables/ebook/EbookFilesTable.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="flex-grow" />
       <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
-        <span class="material-icons text-3xl">expand_more</span>
+        <span class="material-symbols text-3xl">arrow_drop_down</span>
       </div>
     </div>
     <transition name="slide">
@@ -96,4 +96,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/tables/ebook/EbookFilesTableRow.vue b/components/tables/ebook/EbookFilesTableRow.vue
index 0c81a90c..263dcafe 100644
--- a/components/tables/ebook/EbookFilesTableRow.vue
+++ b/components/tables/ebook/EbookFilesTableRow.vue
@@ -1,6 +1,6 @@
 <template>
   <tr>
-    <td class="px-4">{{ file.metadata.filename }} <span v-if="isPrimary" class="material-icons-outlined text-success align-text-bottom text-base">check_circle</span></td>
+    <td class="px-4">{{ file.metadata.filename }} <span v-if="isPrimary" class="material-symbols text-success align-text-bottom text-base">check_circle</span></td>
     <td class="text-xs w-16">
       <ui-icon-btn icon="auto_stories" outlined borderless icon-font-size="1.125rem" :size="8" @click="readEbook" />
     </td>
@@ -57,4 +57,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/tables/playlist/ItemTableRow.vue b/components/tables/playlist/ItemTableRow.vue
index 1d5663f0..953a0038 100644
--- a/components/tables/playlist/ItemTableRow.vue
+++ b/components/tables/playlist/ItemTableRow.vue
@@ -7,14 +7,14 @@
         </div>
         <div class="item-table-content h-full px-2 flex items-center">
           <div class="max-w-full">
-            <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
+            <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-symbols text-success text-base align-text-bottom">download_done</span></p>
             <p v-if="authorName" class="truncate block text-fg-muted text-xs">{{ authorName }}</p>
             <p class="text-xxs text-fg-muted">{{ itemDuration }}</p>
           </div>
         </div>
         <div class="w-8 min-w-8 flex justify-center">
           <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
-            <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
               <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
             </svg>
@@ -22,7 +22,7 @@
         </div>
         <div class="w-8 min-w-8 flex justify-center">
           <button class="w-8 h-8 rounded-full flex items-center justify-center" @click.stop.prevent="showMore">
-            <span class="material-icons">more_vert</span>
+            <span class="material-symbols text-2xl">more_vert</span>
           </button>
         </div>
       </nuxt-link>
@@ -188,4 +188,4 @@ export default {
   width: calc(100% - 114px);
   max-width: calc(100% - 114px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/tables/podcast/EpisodeRow.vue b/components/tables/podcast/EpisodeRow.vue
index 96470839..fde0d8ce 100644
--- a/components/tables/podcast/EpisodeRow.vue
+++ b/components/tables/podcast/EpisodeRow.vue
@@ -29,26 +29,35 @@
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
-          <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-          <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <!-- Play/Pause Button -->
+        <div class="h-10 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
+            {{ streamIsPlaying ? 'pause' : 'play_arrow' }}
+          </span>
+          <svg v-else class="animate-spin" style="width: 28px; height: 28px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
           </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
-        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        <!-- Read Status Button -->
+        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
 
-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
-          <span class="material-icons text-2xl">playlist_add</span>
+        <!-- Add to Playlist Button -->
+        <button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
+          <span class="material-symbols text-2xl leading-none">playlist_add</span>
         </button>
 
-        <div v-if="userCanDownload">
-          <span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
-          <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
+        <!-- Download Section -->
+        <div v-if="userCanDownload" class="flex items-center">
+          <span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
+          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
+            {{ downloadItem || startingDownload ? 'downloading' : 'download' }}
+          </span>
+          <span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
         </div>
 
+        <!-- Spacer to push elements left -->
         <div class="flex-grow" />
       </div>
     </div>
diff --git a/components/tables/podcast/EpisodesTable.vue b/components/tables/podcast/EpisodesTable.vue
index e1219c99..d2b29646 100644
--- a/components/tables/podcast/EpisodesTable.vue
+++ b/components/tables/podcast/EpisodesTable.vue
@@ -5,7 +5,7 @@
       <div class="flex items-center">
         <p class="text-sm py-1">{{ $getString('MessageEpisodesQueuedForDownload', [episodeDownloadsQueued.length]) }}</p>
         <div class="flex-grow" />
-        <span v-if="isAdminOrUp" class="material-icons text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
+        <span v-if="isAdminOrUp" class="material-symbols text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
       </div>
     </div>
 
@@ -23,18 +23,18 @@
       <div class="flex-grow" />
 
       <button v-if="isAdminOrUp && !fetchingRSSFeed" class="outline:none mx-1 pt-0.5 relative" @click="searchEpisodes">
-        <span class="material-icons text-xl text-fg">search</span>
+        <span class="material-symbols text-xl text-fg">search</span>
       </button>
       <widgets-loading-spinner v-else-if="fetchingRSSFeed" class="mx-1" />
 
       <button class="outline:none mx-3 pt-0.5 relative" @click="showFilters">
-        <span class="material-icons text-xl text-fg">filter_alt</span>
+        <span class="material-symbols text-xl text-fg">filter_alt</span>
         <div v-show="filterKey !== 'all' && episodesAreFiltered" class="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
       </button>
 
       <div class="flex items-center border border-white border-opacity-25 rounded px-2" @click="clickSort">
         <p class="text-sm text-fg">{{ sortText }}</p>
-        <span class="material-icons ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+        <span class="material-symbols ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
       </div>
     </div>
 
diff --git a/components/tables/podcast/LatestEpisodeRow.vue b/components/tables/podcast/LatestEpisodeRow.vue
index 27c5a6f1..b5d5591e 100644
--- a/components/tables/podcast/LatestEpisodeRow.vue
+++ b/components/tables/podcast/LatestEpisodeRow.vue
@@ -27,26 +27,35 @@
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
-          <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-          <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <!-- Play/Pause Button -->
+        <div class="h-9 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
+            {{ streamIsPlaying ? 'pause' : 'play_arrow' }}
+          </span>
+          <svg v-else class="animate-spin" style="width: 22px; height: 22px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
           </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
-        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        <!-- Read Status Button -->
+        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
 
-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
-          <span class="material-icons text-2xl">playlist_add</span>
+        <!-- Add to Playlist Button -->
+        <button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
+          <span class="material-symbols text-2xl leading-none">playlist_add</span>
         </button>
 
-        <div v-if="userCanDownload">
-          <span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
-          <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
+        <!-- Download Section -->
+        <div v-if="userCanDownload" class="flex items-center">
+          <span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
+          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
+            {{ downloadItem || pendingDownload ? 'downloading' : 'download' }}
+          </span>
+          <span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
         </div>
 
+        <!-- Spacer to push elements left -->
         <div class="flex-grow" />
       </div>
     </div>
diff --git a/components/ui/Dropdown.vue b/components/ui/Dropdown.vue
index f5975941..a4c5ffa3 100644
--- a/components/ui/Dropdown.vue
+++ b/components/ui/Dropdown.vue
@@ -6,7 +6,7 @@
         <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText || placeholder || '' }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons">expand_more</span>
+        <span class="material-symbols">arrow_drop_down</span>
       </span>
     </button>
 
@@ -86,4 +86,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/ui/DropdownMenu.vue b/components/ui/DropdownMenu.vue
index 00954186..096f44fb 100644
--- a/components/ui/DropdownMenu.vue
+++ b/components/ui/DropdownMenu.vue
@@ -9,14 +9,14 @@
           <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
             <li :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
               <div class="flex items-center px-2">
-                <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
+                <span v-if="item.icon" class="material-symbols text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
                 <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
               </div>
             </li>
           </nuxt-link>
           <li v-else :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center px-2">
-              <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
+              <span v-if="item.icon" class="material-symbols text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
               <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
             </div>
           </li>
@@ -102,4 +102,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/ui/IconBtn.vue b/components/ui/IconBtn.vue
index 47df2a6a..e9ca4451 100644
--- a/components/ui/IconBtn.vue
+++ b/components/ui/IconBtn.vue
@@ -5,7 +5,7 @@
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
-    <span v-else :class="outlined ? 'material-icons-outlined' : 'material-icons'" :style="{ fontSize }">{{ icon }}</span>
+    <span v-else class="material-symbols text-2xl" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
   </button>
 </template>
 
diff --git a/components/ui/Menu.vue b/components/ui/Menu.vue
index 26f5a708..9d9bd6af 100644
--- a/components/ui/Menu.vue
+++ b/components/ui/Menu.vue
@@ -5,7 +5,7 @@
         <span class="block truncate">{{ label }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-fg">person</span>
+        <span class="material-symbols text-fg">person</span>
       </span>
     </button>
 
@@ -58,4 +58,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/ui/MultiSelect.vue b/components/ui/MultiSelect.vue
index 432d082a..03222f68 100644
--- a/components/ui/MultiSelect.vue
+++ b/components/ui/MultiSelect.vue
@@ -6,8 +6,8 @@
         <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
           <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
             <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg bg-opacity-75 flex items-center justify-end opacity-0 hover:opacity-100">
-              <span v-if="showEdit" class="material-icons text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
-              <span class="material-icons text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
+              <span v-if="showEdit" class="material-symbols text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
+              <span class="material-symbols text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
             </div>
             {{ item }}
           </div>
@@ -22,7 +22,7 @@
               <span class="font-normal ml-3 block truncate">{{ item }}</span>
             </div>
             <span v-if="selected.includes(item)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-              <span class="material-icons text-xl">checkmark</span>
+              <span class="material-symbols text-xl">checkmark</span>
             </span>
           </li>
         </template>
@@ -258,4 +258,4 @@ input:read-only {
   color: #aaa;
   background-color: #444;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/ui/TextInput.vue b/components/ui/TextInput.vue
index 0e193ba7..942a97e5 100644
--- a/components/ui/TextInput.vue
+++ b/components/ui/TextInput.vue
@@ -2,13 +2,13 @@
   <div class="relative">
     <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary disabled:text-fg-muted" :class="inputClass" @keyup="keyup" />
     <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
-      <span class="material-icons text-lg">{{ prependIcon }}</span>
+      <span class="material-symbols text-lg">{{ prependIcon }}</span>
     </div>
     <div v-if="clearable && input" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center" @click.stop="clear">
-      <span class="material-icons text-lg">close</span>
+      <span class="material-symbols text-lg">close</span>
     </div>
     <div v-else-if="!clearable && appendIcon" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
-      <span class="material-icons text-lg">{{ appendIcon }}</span>
+      <span class="material-symbols text-lg">{{ appendIcon }}</span>
     </div>
   </div>
 </template>
@@ -91,4 +91,4 @@ input[type='time']::-webkit-calendar-picker-indicator {
 html[data-theme='light'] input[type='time']::-webkit-calendar-picker-indicator {
   filter: unset;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/widgets/ConnectionIndicator.vue b/components/widgets/ConnectionIndicator.vue
index cefe3379..24911433 100644
--- a/components/widgets/ConnectionIndicator.vue
+++ b/components/widgets/ConnectionIndicator.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="icon" class="flex h-full items-center px-2">
-    <span class="material-icons-outlined text-lg" :class="iconClass" @click="showAlertDialog">{{ icon }}</span>
+    <span class="material-symbols text-lg" :class="iconClass" @click="showAlertDialog">{{ icon }}</span>
   </div>
 </template>
 
@@ -79,4 +79,4 @@ export default {
   mounted() {},
   beforeDestroy() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/account.vue b/pages/account.vue
index 83a3573b..eb686e8e 100644
--- a/pages/account.vue
+++ b/pages/account.vue
@@ -4,7 +4,7 @@
 
     <ui-text-input-with-label :value="username" :label="$strings.LabelUsername" disabled class="my-2" />
 
-    <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">{{ $strings.ButtonSwitchServerUser }}<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
+    <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">{{ $strings.ButtonSwitchServerUser }}<span class="material-symbols" style="font-size: 1.1rem">logout</span></ui-btn>
 
     <div class="flex justify-center items-center my-4 left-0 right-0 bottom-0 absolute">
       <p class="text-sm text-fg">{{ $strings.MessageReportBugsAndContribute }} <a class="underline" href="https://github.com/advplyr/audiobookshelf-app" target="_blank">GitHub</a></p>
diff --git a/pages/bookshelf/add-podcast.vue b/pages/bookshelf/add-podcast.vue
index 712edd8e..a611c8ec 100644
--- a/pages/bookshelf/add-podcast.vue
+++ b/pages/bookshelf/add-podcast.vue
@@ -35,7 +35,7 @@
     <template v-else>
       <div class="flex items-center px-2 h-16">
         <div class="flex items-center" @click="clearSelected">
-          <span class="material-icons text-2xl text-fg-muted">arrow_back</span>
+          <span class="material-symbols text-2xl text-fg-muted">arrow_back</span>
           <p class="pl-2 uppercase text-sm font-semibold text-fg-muted leading-4 pb-px">{{ $strings.ButtonBack }}</p>
         </div>
       </div>
diff --git a/pages/bookshelf/index.vue b/pages/bookshelf/index.vue
index c41ddfc6..add53443 100644
--- a/pages/bookshelf/index.vue
+++ b/pages/bookshelf/index.vue
@@ -22,7 +22,7 @@
         </p>
         <div class="w-full" v-if="!user">
           <div class="flex justify-center items-center mb-3">
-            <span class="material-icons text-error text-lg">cloud_off</span>
+            <span class="material-symbols text-error text-lg">cloud_off</span>
             <p class="pl-2 text-error text-sm">{{ $strings.MessageAudiobookshelfServerNotConnected }}</p>
           </div>
         </div>
@@ -341,4 +341,4 @@ export default {
     this.removeListeners()
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/collection/_id.vue b/pages/collection/_id.vue
index 964faa19..9f371c66 100644
--- a/pages/collection/_id.vue
+++ b/pages/collection/_id.vue
@@ -13,7 +13,7 @@
           </h1>
           <div class="flex-grow" />
           <ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
-            <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
           </ui-btn>
         </div>
@@ -139,4 +139,4 @@ export default {
   },
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/connect.vue b/pages/connect.vue
index ec1b2426..b20c5f69 100644
--- a/pages/connect.vue
+++ b/pages/connect.vue
@@ -2,7 +2,7 @@
   <div class="w-full h-full">
     <div class="relative flex items-center justify-center min-h-screen sm:pt-0">
       <nuxt-link to="/" class="absolute top-2 left-2 z-20">
-        <span class="material-icons text-4xl">arrow_back</span>
+        <span class="material-symbols text-4xl">arrow_back</span>
       </nuxt-link>
       <div class="absolute top-0 left-0 w-full p-6 flex items-center flex-col justify-center z-0 short:hidden">
         <img src="/Logo.png" class="h-20 w-20 mb-2" />
diff --git a/pages/downloading.vue b/pages/downloading.vue
index c793533b..248499e8 100644
--- a/pages/downloading.vue
+++ b/pages/downloading.vue
@@ -7,7 +7,7 @@
       <div :key="itemPart.id" class="w-full">
         <div class="flex">
           <div class="w-14">
-            <span v-if="itemPart.completed" class="material-icons text-success">check_circle_outline</span>
+            <span v-if="itemPart.completed" class="material-symbols text-success">check_circle</span>
             <span v-else class="font-semibold text-fg">{{ Math.round(itemPart.progress) }}%</span>
           </div>
           <div class="flex-grow px-2">
diff --git a/pages/downloads.vue b/pages/downloads.vue
index 42bd1f9d..be7b4eef 100644
--- a/pages/downloads.vue
+++ b/pages/downloads.vue
@@ -16,16 +16,14 @@
               <p v-if="mediaItem.size" class="text-xs text-fg-muted">{{ $bytesPretty(mediaItem.size) }}</p>
             </div>
             <div class="w-12 h-12 flex items-center justify-center">
-              <span class="material-icons text-2xl text-fg-muted">chevron_right</span>
+              <span class="material-symbols text-2xl text-fg-muted">chevron_right</span>
             </div>
           </nuxt-link>
           <div v-if="num + 1 < localLibraryItems.length" class="flex border-t border-fg/10 my-3" />
         </div>
       </template>
     </div>
-    <div v-if="localLibraryItems.length" class="mt-4 text-sm text-fg-muted">
-      {{ $strings.LabelTotalSize }}: {{ $bytesPretty(localLibraryItems.reduce((acc, item) => acc + item.size, 0)) }}
-    </div>
+    <div v-if="localLibraryItems.length" class="mt-4 text-sm text-fg-muted">{{ $strings.LabelTotalSize }}: {{ $bytesPretty(localLibraryItems.reduce((acc, item) => acc + item.size, 0)) }}</div>
   </div>
 </template>
 
diff --git a/pages/item/_id/_episode/index.vue b/pages/item/_id/_episode/index.vue
index be3ec3c6..e560e45f 100644
--- a/pages/item/_id/_episode/index.vue
+++ b/pages/item/_id/_episode/index.vue
@@ -30,14 +30,14 @@
     <!-- action buttons -->
     <div class="flex mt-4 -mx-1">
       <ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
-        <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+        <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
         <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : localEpisodeId ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
       </ui-btn>
       <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
-        <span class="material-icons" :class="(downloadItem || startingDownload) ? 'animate-pulse' : ''">{{ (downloadItem || startingDownload) ? 'downloading' : 'download' }}</span>
+        <span class="material-symbols text-2xl" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
       </ui-btn>
       <ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="showMoreMenu = true">
-        <span class="material-icons">more_vert</span>
+        <span class="material-symbols text-2xl">more_vert</span>
       </ui-btn>
     </div>
 
@@ -324,14 +324,16 @@ export default {
         return timeParts.reduce((acc, part, index) => acc * 60 + part, 0)
       }
 
-      return description.replace(timeMarkerLinkRegex, (match, href, displayTime) => {
-        const time = displayTime.match(timeMarkerRegex)[0]
-        const seekTimeInSeconds = convertToSeconds(time)
-        return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${displayTime}</span>`
-      }).replace(timeMarkerRegex, (match) => {
-        const seekTimeInSeconds = convertToSeconds(match)
-        return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${match}</span>`
-      })
+      return description
+        .replace(timeMarkerLinkRegex, (match, href, displayTime) => {
+          const time = displayTime.match(timeMarkerRegex)[0]
+          const seekTimeInSeconds = convertToSeconds(time)
+          return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${displayTime}</span>`
+        })
+        .replace(timeMarkerRegex, (match) => {
+          const seekTimeInSeconds = convertToSeconds(match)
+          return `<span class="time-marker cursor-pointer text-blue-400 hover:text-blue-300" data-time="${seekTimeInSeconds}">${match}</span>`
+        })
     },
     async deleteLocalEpisode() {
       await this.$hapticsImpact()
@@ -612,7 +614,7 @@ export default {
   },
   beforeDestroy() {
     this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
-    document.querySelectorAll('.time-marker').forEach(marker => {
+    document.querySelectorAll('.time-marker').forEach((marker) => {
       marker.removeEventListener('click', this.clickPlaybackTime)
     })
   }
diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index b6d76e10..92895276 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -51,22 +51,22 @@
         <div class="col-span-full">
           <div v-if="showPlay || showRead" class="flex mt-4 -mx-1">
             <ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
-              <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+              <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
               <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : isPodcast ? $strings.ButtonNextEpisode : hasLocal ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
             </ui-btn>
             <ui-btn v-if="showRead" color="info" class="flex items-center justify-center mx-1" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
-              <span class="material-icons">auto_stories</span>
+              <span class="material-symbols text-2xl">auto_stories</span>
               <span v-if="!showPlay" class="px-2 text-base">{{ $strings.ButtonRead }} {{ ebookFormat }}</span>
             </ui-btn>
             <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
-              <span class="material-icons" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
+              <span class="material-symbols text-2xl" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
             </ui-btn>
             <ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="moreButtonPress">
-              <span class="material-icons">more_vert</span>
+              <span class="material-symbols text-2xl">more_vert</span>
             </ui-btn>
           </div>
           <ui-btn v-else-if="isMissing" color="error" :padding-x="4" small class="mt-4 flex items-center justify-center w-full" @click="clickMissingButton">
-            <span class="material-icons">error</span>
+            <span class="material-symbols">error</span>
             <span class="px-1 text-base">{{ $strings.LabelMissing }}</span>
           </ui-btn>
 
@@ -140,7 +140,7 @@
 
           <div v-if="descriptionClamped" class="text-fg text-sm py-2" @click="showFullDescription = !showFullDescription">
             {{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }}
-            <span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
+            <span class="material-symbols !align-middle text-base -mt-px">{{ showFullDescription ? 'arrow_drop_up' : 'arrow_drop_down' }}</span>
           </div>
         </div>
 
diff --git a/pages/localMedia/folders/_id.vue b/pages/localMedia/folders/_id.vue
index 3c722b6c..9fb189dd 100644
--- a/pages/localMedia/folders/_id.vue
+++ b/pages/localMedia/folders/_id.vue
@@ -4,7 +4,7 @@
       <p class="text-base font-semibold">{{ $strings.LabelFolder }}: {{ folderName }}</p>
       <div class="flex-grow" />
 
-      <span v-if="dialogItems.length" class="material-icons" @click="showDialog = true">more_vert</span>
+      <span v-if="dialogItems.length" class="material-symbols text-2xl" @click="showDialog = true">more_vert</span>
     </div>
 
     <p class="text-sm mb-4 text-fg-muted">{{ $strings.LabelMediaType }}: {{ mediaType }}</p>
@@ -22,7 +22,7 @@
             <p class="text-xs text-fg-muted">{{ getLocalLibraryItemSubText(localLibraryItem) }}</p>
           </div>
           <div class="w-12 h-12 flex items-center justify-center">
-            <span class="material-icons text-xl text-fg-muted">arrow_right</span>
+            <span class="material-symbols text-xl text-fg-muted">arrow_right</span>
           </div>
         </nuxt-link>
       </template>
@@ -159,4 +159,4 @@ export default {
   height: calc(100vh - 310px);
   max-height: calc(100vh - 310px);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/localMedia/folders/index.vue b/pages/localMedia/folders/index.vue
index b63f25f1..301c84c3 100644
--- a/pages/localMedia/folders/index.vue
+++ b/pages/localMedia/folders/index.vue
@@ -4,17 +4,17 @@
       <h1 class="text-base font-semibold px-2">
         {{ $strings.HeaderLocalFolders }}
       </h1>
-      <button type="button" class="material-icons-outlined" @click.stop="showLocalFolderMoreInfo">info</button>
+      <button type="button" class="material-symbols text-xl" @click.stop="showLocalFolderMoreInfo">info</button>
     </div>
 
     <div v-if="!isIos" class="w-full max-w-full px-2 py-2">
       <template v-for="folder in localFolders">
         <nuxt-link :to="`/localMedia/folders/${folder.id}`" :key="folder.id" class="flex items-center px-2 py-4 bg-primary rounded-md border-bg mb-1">
-          <span class="material-icons text-xl text-yellow-400">folder</span>
+          <span class="material-symbols fill text-xl text-yellow-400">folder</span>
           <p class="ml-2">{{ folder.name }}</p>
           <div class="flex-grow" />
           <p class="text-sm italic text-fg-muted px-3 capitalize">{{ folder.mediaType }}s</p>
-          <span class="material-icons text-xl text-fg-muted">arrow_right</span>
+          <span class="material-symbols text-xl text-fg-muted">arrow_right</span>
         </nuxt-link>
       </template>
       <div v-if="!localFolders.length" class="flex justify-center">
diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index 454904d7..1704cfdb 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -6,9 +6,9 @@
         <div class="flex-grow" />
 
         <button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-success flex items-center justify-center rounded-full mx-2" @click.stop="play">
-          <span class="material-icons" style="font-size: 2rem">play_arrow</span>
+          <span class="material-symbols fill" style="font-size: 2rem">play_arrow</span>
         </button>
-        <span class="material-icons" @click="showItemDialog">more_vert</span>
+        <span class="material-symbols text-2xl" @click="showItemDialog">more_vert</span>
       </div>
 
       <p v-if="!isIos" class="px-2 text-sm mb-0.5 text-fg-muted">{{ $strings.LabelFolder }}: {{ folderName }}</p>
@@ -27,7 +27,7 @@
               <template v-for="track in audioTracksCopy">
                 <div :key="track.localFileId" class="flex items-center my-1 item">
                   <div v-if="!isIos" class="w-8 h-12 flex items-center justify-center" style="min-width: 32px">
-                    <span class="material-icons drag-handle text-lg text-fg-muted">menu</span>
+                    <span class="material-symbols drag-handle text-lg text-fg-muted">menu</span>
                   </div>
                   <div class="w-8 h-12 flex items-center justify-center" style="min-width: 32px">
                     <p class="font-mono font-bold text-xl">{{ track.index }}</p>
@@ -40,7 +40,7 @@
                     <p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
                   </div>
                   <div v-if="!isIos" class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
-                    <span class="material-icons" @click="showTrackDialog(track)">more_vert</span>
+                    <span class="material-symbols text-2xl" @click="showTrackDialog(track)">more_vert</span>
                   </div>
                 </div>
               </template>
@@ -66,7 +66,7 @@
                 <p class="text-sm">{{ $elapsedPretty(episode.audioTrack.duration) }}</p>
               </div>
               <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
-                <span class="material-icons" @click="showTrackDialog(episode)">more_vert</span>
+                <span class="material-symbols text-2xl" @click="showTrackDialog(episode)">more_vert</span>
               </div>
             </div>
           </template>
@@ -98,7 +98,7 @@
             <div :key="file.id" class="flex items-center my-1">
               <div class="w-12 h-12 flex items-center justify-center">
                 <img v-if="(file.mimeType || '').startsWith('image')" :src="getCapImageSrc(file.contentUrl)" class="w-full h-full object-contain" />
-                <span v-else class="material-icons">music_note</span>
+                <span v-else class="material-symbols">music_note</span>
               </div>
               <div class="flex-grow px-2">
                 <p class="text-sm">{{ file.filename }}</p>
@@ -111,9 +111,7 @@
           </template>
         </div>
 
-        <div class="mt-4 text-sm text-fg-muted">
-          {{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalLibraryItemSize) }}
-        </div>
+        <div class="mt-4 text-sm text-fg-muted">{{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalLibraryItemSize) }}</div>
       </div>
     </div>
     <div v-else class="px-2 w-full h-full">
@@ -263,7 +261,7 @@ export default {
       return this.$store.state.playerIsStartingPlayback
     },
     totalAudioSize() {
-      return this.audioTracks.reduce((acc, item) => item.metadata ? acc + item.metadata.size : acc, 0)
+      return this.audioTracks.reduce((acc, item) => (item.metadata ? acc + item.metadata.size : acc), 0)
     },
     totalEpisodesSize() {
       return this.episodes.reduce((acc, item) => acc + item.size, 0)
@@ -353,7 +351,7 @@ export default {
       } else if (action == 'play-episode') {
         this.playEpisode()
       }
-      this.showDialog = false;
+      this.showDialog = false
     },
     getLocalFileForTrack(localFileId) {
       return this.localFiles.find((lf) => lf.id == localFileId)
diff --git a/pages/media/_id/history.vue b/pages/media/_id/history.vue
index fb38c67a..d63b7b66 100644
--- a/pages/media/_id/history.vue
+++ b/pages/media/_id/history.vue
@@ -10,11 +10,11 @@
       <p class="my-2 text-fg-muted font-semibold">{{ name }}</p>
       <div v-for="(evt, index) in events" :key="index" class="py-3 flex items-center">
         <p class="text-sm text-fg-muted w-12">{{ $formatDate(evt.timestamp, 'HH:mm') }}</p>
-        <span class="material-icons px-1" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
+        <span class="material-symbols fill px-2" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
         <p class="text-sm text-fg px-1">{{ evt.name }}</p>
 
-        <span v-if="evt.serverSyncAttempted && evt.serverSyncSuccess" class="material-icons-outlined px-1 text-base text-success">cloud_done</span>
-        <span v-if="evt.serverSyncAttempted && !evt.serverSyncSuccess" class="material-icons px-1 text-base text-error">error_outline</span>
+        <span v-if="evt.serverSyncAttempted && evt.serverSyncSuccess" class="material-symbols px-1 text-base text-success">cloud_done</span>
+        <span v-if="evt.serverSyncAttempted && !evt.serverSyncSuccess" class="material-symbols px-1 text-base text-error">error_outline</span>
 
         <p v-if="evt.num" class="text-sm text-fg-muted italic px-1">+{{ evt.num }}</p>
 
@@ -150,9 +150,9 @@ export default {
     getEventIcon(name) {
       switch (name) {
         case 'Play':
-          return 'play_circle_filled'
+          return 'play_circle'
         case 'Pause':
-          return 'pause_circle_filled'
+          return 'pause_circle'
         case 'Stop':
           return 'stop_circle'
         case 'Save':
diff --git a/pages/playlist/_id.vue b/pages/playlist/_id.vue
index 25096407..6f84cc8b 100644
--- a/pages/playlist/_id.vue
+++ b/pages/playlist/_id.vue
@@ -11,7 +11,7 @@
           </h1>
           <div class="flex-grow" />
           <ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
-            <span class="material-icons">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
           </ui-btn>
         </div>
@@ -173,4 +173,4 @@ export default {
     this.$socket.$off('playlist_removed', this.playlistRemoved)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 09b3216b..5c3c75ae 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -44,13 +44,13 @@
     </div>
     <div class="flex items-center py-3">
       <div class="w-10 flex justify-center" @click="toggleJumpBackwards">
-        <span class="material-icons text-4xl">{{ currentJumpBackwardsTimeIcon }}</span>
+        <span class="material-symbols text-4xl">{{ currentJumpBackwardsTimeIcon }}</span>
       </div>
       <p class="pl-4">{{ $strings.LabelJumpBackwardsTime }}</p>
     </div>
     <div class="flex items-center py-3">
       <div class="w-10 flex justify-center" @click="toggleJumpForward">
-        <span class="material-icons text-4xl">{{ currentJumpForwardTimeIcon }}</span>
+        <span class="material-symbols text-4xl">{{ currentJumpForwardTimeIcon }}</span>
       </div>
       <p class="pl-4">{{ $strings.LabelJumpForwardsTime }}</p>
     </div>
@@ -59,7 +59,7 @@
         <ui-toggle-switch v-model="settings.enableMp3IndexSeeking" @input="saveSettings" />
       </div>
       <p class="pl-4">{{ $strings.LabelEnableMp3IndexSeeking }}</p>
-      <span class="material-icons-outlined ml-2" @click.stop="showConfirmMp3IndexSeeking">info</span>
+      <span class="material-symbols text-xl ml-2" @click.stop="showConfirmMp3IndexSeeking">info</span>
     </div>
     <div class="flex items-center py-3">
       <div class="w-10 flex justify-center" @click="toggleAllowSeekingOnMediaControls">
@@ -76,7 +76,7 @@
           <ui-toggle-switch v-model="settings.disableShakeToResetSleepTimer" @input="saveSettings" />
         </div>
         <p class="pl-4">{{ $strings.LabelDisableShakeToReset }}</p>
-        <span class="material-icons-outlined ml-2" @click.stop="showInfo('disableShakeToResetSleepTimer')">info</span>
+        <span class="material-symbols text-xl ml-2" @click.stop="showInfo('disableShakeToResetSleepTimer')">info</span>
       </div>
       <div v-if="!settings.disableShakeToResetSleepTimer" class="py-3 flex items-center">
         <p class="pr-4 w-36">{{ $strings.LabelShakeSensitivity }}</p>
@@ -85,27 +85,27 @@
         </div>
       </div>
     </template>
-      <div class="flex items-center py-3">
-        <div class="w-10 flex justify-center" @click="toggleDisableSleepTimerFadeOut">
-          <ui-toggle-switch v-model="settings.disableSleepTimerFadeOut" @input="saveSettings" />
-        </div>
-        <p class="pl-4">{{ $strings.LabelDisableAudioFadeOut }}</p>
-        <span class="material-icons-outlined ml-2" @click.stop="showInfo('disableSleepTimerFadeOut')">info</span>
+    <div class="flex items-center py-3">
+      <div class="w-10 flex justify-center" @click="toggleDisableSleepTimerFadeOut">
+        <ui-toggle-switch v-model="settings.disableSleepTimerFadeOut" @input="saveSettings" />
       </div>
+      <p class="pl-4">{{ $strings.LabelDisableAudioFadeOut }}</p>
+      <span class="material-symbols text-xl ml-2" @click.stop="showInfo('disableSleepTimerFadeOut')">info</span>
+    </div>
     <template v-if="!isiOS">
       <div class="flex items-center py-3">
         <div class="w-10 flex justify-center" @click="toggleDisableSleepTimerResetFeedback">
           <ui-toggle-switch v-model="settings.disableSleepTimerResetFeedback" @input="saveSettings" />
         </div>
         <p class="pl-4">{{ $strings.LabelDisableVibrateOnReset }}</p>
-        <span class="material-icons-outlined ml-2" @click.stop="showInfo('disableSleepTimerResetFeedback')">info</span>
+        <span class="material-symbols text-xl ml-2" @click.stop="showInfo('disableSleepTimerResetFeedback')">info</span>
       </div>
       <div class="flex items-center py-3">
         <div class="w-10 flex justify-center" @click="toggleAutoSleepTimer">
           <ui-toggle-switch v-model="settings.autoSleepTimer" @input="saveSettings" />
         </div>
         <p class="pl-4">{{ $strings.LabelAutoSleepTimer }}</p>
-        <span class="material-icons-outlined ml-2" @click.stop="showInfo('autoSleepTimer')">info</span>
+        <span class="material-symbols text-xl ml-2" @click.stop="showInfo('autoSleepTimer')">info</span>
       </div>
     </template>
     <!-- Auto Sleep timer settings -->
@@ -128,7 +128,7 @@
         <ui-toggle-switch v-model="settings.autoSleepTimerAutoRewind" @input="saveSettings" />
       </div>
       <p class="pl-4">{{ $strings.LabelAutoSleepTimerAutoRewind }}</p>
-      <span class="material-icons-outlined ml-2" @click.stop="showInfo('autoSleepTimerAutoRewind')">info</span>
+      <span class="material-symbols text-xl ml-2" @click.stop="showInfo('autoSleepTimerAutoRewind')">info</span>
     </div>
     <div v-if="settings.autoSleepTimerAutoRewind" class="py-3 flex items-center">
       <p class="pr-4 w-36">{{ $strings.LabelAutoRewindTime }}</p>
@@ -158,7 +158,7 @@
       <div class="py-3 flex items-center">
         <p class="pr-4 w-36">{{ $strings.LabelAndroidAutoBrowseLimitForGrouping }}</p>
         <ui-text-input type="number" v-model="settings.androidAutoBrowseLimitForGrouping" style="width: 145px; max-width: 145px" @input="androidAutoBrowseLimitForGroupingUpdated" />
-        <span class="material-icons-outlined ml-2" @click.stop="showInfo('androidAutoBrowseLimitForGrouping')">info</span>
+        <span class="material-symbols text-xl ml-2" @click.stop="showInfo('androidAutoBrowseLimitForGrouping')">info</span>
       </div>
       <div class="py-3 flex items-center">
         <p class="pr-4 w-36">{{ $strings.LabelAndroidAutoBrowseSeriesSequenceOrder }}</p>
diff --git a/static/fonts/MaterialIcons-Regular.ttf b/static/fonts/MaterialIcons-Regular.ttf
deleted file mode 100644
index 9d09b0fe..00000000
Binary files a/static/fonts/MaterialIcons-Regular.ttf and /dev/null differ
diff --git a/static/fonts/MaterialIconsOutlined-Regular.otf b/static/fonts/MaterialIconsOutlined-Regular.otf
deleted file mode 100644
index 9dad12bc..00000000
Binary files a/static/fonts/MaterialIconsOutlined-Regular.otf and /dev/null differ
diff --git a/static/fonts/MaterialSymbolsRounded.woff2 b/static/fonts/MaterialSymbolsRounded.woff2
new file mode 100644
index 00000000..88a9a81f
Binary files /dev/null and b/static/fonts/MaterialSymbolsRounded.woff2 differ