diff --git a/client/assets/fonts.css b/client/assets/fonts.css
index 4e280dc9..c568ffa6 100644
--- a/client/assets/fonts.css
+++ b/client/assets/fonts.css
@@ -2,14 +2,7 @@
   font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 400;
-  src: url(~static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(~static/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format('woff2');
+  src: url(~static/fonts/MaterialSymbolsRounded.woff2) format('woff2');
 }
 
 .material-symbols {
@@ -32,26 +25,6 @@
     'FILL' 1
 }
 
-.material-symbols-outlined {
-  font-family: 'Material Symbols 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;
-  vertical-align: top;
-}
-
-.material-symbols-outlined.fill {
-  font-variation-settings:
-    'FILL' 1
-}
-
 /* cyrillic-ext */
 @font-face {
   font-family: 'Source Sans Pro';
diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index 1ded2f7a..183d58eb 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -16,7 +16,7 @@
         <div class="flex-grow" />
 
         <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
-          <span class="material-symbols-outlined text-2xl text-warning text-opacity-50"> cast </span>
+          <span class="material-symbols text-2xl text-warning text-opacity-50"> cast </span>
         </ui-tooltip>
         <div v-if="isChromecastInitialized" class="w-6 min-w-6 h-6 ml-2 mr-1 sm:mx-2 cursor-pointer">
           <google-cast-launcher></google-cast-launcher>
@@ -26,19 +26,19 @@
 
         <nuxt-link v-if="currentLibrary" to="/config/stats" class="hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.HeaderYourStats" direction="bottom" class="flex items-center">
-            <span class="material-symbols text-2xl" aria-label="User Stats" role="button">equalizer</span>
+            <span class="material-symbols text-2xl" aria-label="User Stats" role="button">&#xe01d;</span>
           </ui-tooltip>
         </nuxt-link>
 
         <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.ButtonUpload" direction="bottom" class="flex items-center">
-            <span class="material-symbols text-2xl" aria-label="Upload Media" role="button">upload</span>
+            <span class="material-symbols text-2xl" aria-label="Upload Media" role="button">&#xf09b;</span>
           </ui-tooltip>
         </nuxt-link>
 
         <nuxt-link v-if="userIsAdminOrUp" to="/config" class="hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
           <ui-tooltip :text="$strings.HeaderSettings" direction="bottom" class="flex items-center">
-            <span class="material-symbols text-2xl" aria-label="System Settings" role="button">settings</span>
+            <span class="material-symbols text-2xl" aria-label="System Settings" role="button">&#xe8b8;</span>
           </ui-tooltip>
         </nuxt-link>
 
@@ -47,7 +47,7 @@
             <span class="block truncate">{{ username }}</span>
           </span>
           <span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
-            <span class="material-symbols text-xl text-gray-100">person</span>
+            <span class="material-symbols text-xl text-gray-100">&#xe7fd;</span>
           </span>
         </nuxt-link>
       </div>
diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue
index 8e0cb18c..00b0d4a9 100644
--- a/client/components/app/BookShelfToolbar.vue
+++ b/client/components/app/BookShelfToolbar.vue
@@ -24,11 +24,11 @@
       </nuxt-link>
       <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="flex-grow h-full flex justify-center items-center" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isPlaylistsPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonPlaylists }}</p>
-        <span v-else class="material-symbols-outlined text-lg">queue_music</span>
+        <span v-else class="material-symbols text-lg">&#xe03d;</span>
       </nuxt-link>
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
-        <span v-else class="material-symbols-outlined text-lg">collections_bookmark</span>
+        <span v-else class="material-symbols text-lg">&#xe431;</span>
       </nuxt-link>
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
         <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
diff --git a/client/components/app/SideRail.vue b/client/components/app/SideRail.vue
index 2c1538ec..e74396ed 100644
--- a/client/components/app/SideRail.vue
+++ b/client/components/app/SideRail.vue
@@ -15,7 +15,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-2xl">format_list_bulleted</span>
+        <span class="material-symbols text-2xl">&#xe241;</span>
 
         <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
 
@@ -43,7 +43,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols-outlined text-2xl">collections_bookmark</span>
+        <span class="material-symbols text-2xl">&#xe431;</span>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
 
@@ -51,7 +51,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-2.5xl">queue_music</span>
+        <span class="material-symbols text-2.5xl">&#xe03d;</span>
 
         <p class="pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
 
@@ -72,7 +72,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary" :to="`/library/${currentLibraryId}/narrators`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isNarratorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-2xl">record_voice_over</span>
+        <span class="material-symbols text-2xl">&#xe91f;</span>
 
         <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.LabelNarrators }}</p>
 
@@ -80,7 +80,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isBookLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/stats`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isStatsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-2xl">monitoring</span>
+        <span class="material-symbols text-2xl">&#xf190;</span>
 
         <p class="pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonStats }}</p>
 
@@ -96,7 +96,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isMusicLibrary" :to="`/library/${currentLibraryId}/bookshelf/albums`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isMusicAlbumsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols-outlined text-xl">album</span>
+        <span class="material-symbols text-xl">album</span>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">Albums</p>
 
@@ -104,7 +104,7 @@
       </nuxt-link>
 
       <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/download-queue`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastDownloadQueuePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-        <span class="material-symbols text-2xl">file_download</span>
+        <span class="material-symbols text-2xl">&#xf090;</span>
 
         <p class="pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonDownloadQueue }}</p>
 
diff --git a/client/components/cards/NarratorCard.vue b/client/components/cards/NarratorCard.vue
index b5d0b615..cf09b812 100644
--- a/client/components/cards/NarratorCard.vue
+++ b/client/components/cards/NarratorCard.vue
@@ -3,7 +3,7 @@
     <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(name)}`">
       <div cy-id="card" :style="{ width: cardWidth + 'px', height: cardHeight + 'px', fontSize: sizeMultiplier + 'rem' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
         <div class="absolute inset-0 w-full h-full flex items-center justify-center pointer-events-none opacity-40">
-          <span class="material-symbols-outlined text-[10em]">record_voice_over</span>
+          <span class="material-symbols text-[10em]">&#xe91f;</span>
         </div>
 
         <!-- Narrator name & num books overlay -->
diff --git a/client/components/cards/NarratorSearchCard.vue b/client/components/cards/NarratorSearchCard.vue
index 00909c75..51d0258b 100644
--- a/client/components/cards/NarratorSearchCard.vue
+++ b/client/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-symbols text-2xl text-gray-200">record_voice_over</span>
+      <span class="material-symbols text-2xl text-gray-200">&#xe91f;</span>
     </div>
     <div class="flex-grow px-2 narratorSearchCardContent h-full">
       <p class="truncate text-sm">{{ narrator }}</p>
diff --git a/client/components/controls/GlobalSearch.vue b/client/components/controls/GlobalSearch.vue
index 3c2c6039..2b3fc573 100644
--- a/client/components/controls/GlobalSearch.vue
+++ b/client/components/controls/GlobalSearch.vue
@@ -5,7 +5,7 @@
         <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
       </form>
       <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
-        <span v-if="!search" class="material-symbols" style="font-size: 1.2rem">search</span>
+        <span v-if="!search" class="material-symbols" style="font-size: 1.2rem">&#xe8b6;</span>
         <span v-else class="material-symbols" style="font-size: 1.2rem">close</span>
       </div>
     </div>
diff --git a/client/components/stats/PreviewIcons.vue b/client/components/stats/PreviewIcons.vue
index 093ffe17..7eea9d51 100644
--- a/client/components/stats/PreviewIcons.vue
+++ b/client/components/stats/PreviewIcons.vue
@@ -29,7 +29,7 @@
     </div>
 
     <div class="flex p-2">
-      <span class="material-symbols-outlined text-5xl pt-1">insert_drive_file</span>
+      <span class="material-symbols text-5xl pt-1">insert_drive_file</span>
       <div class="px-1">
         <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalSizeNum) }}</p>
         <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelSize }} ({{ totalSizeMod }})</p>
@@ -37,7 +37,7 @@
     </div>
 
     <div class="flex p-2">
-      <span class="material-symbols-outlined text-5xl pt-1">audio_file</span>
+      <span class="material-symbols text-5xl pt-1">audio_file</span>
       <div class="px-1">
         <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(numAudioTracks) }}</p>
         <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAudioTracks }}</p>
@@ -103,4 +103,4 @@ export default {
   methods: {},
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue
index 54f0e65e..57e1e088 100644
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@@ -73,7 +73,7 @@ export default {
 
       const addIcon = (icon, color, fontSize, x, y) => {
         ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Symbols Outlined`
+        ctx.font = `${fontSize} Material Symbols Rounded`
         ctx.fillText(icon, x, y)
       }
 
@@ -152,7 +152,7 @@ export default {
 
       // Top text
       addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
-      addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51,)
+      addText(`${this.year} ${this.$strings.StatsYearInReview}`, '18px', 'bold', 'white', '1px', 65, 51)
 
       // Top left box
       createRoundedRect(50, 100, 340, 160)
diff --git a/client/components/stats/YearInReviewBanner.vue b/client/components/stats/YearInReviewBanner.vue
index 968ea5de..cf98d5cb 100644
--- a/client/components/stats/YearInReviewBanner.vue
+++ b/client/components/stats/YearInReviewBanner.vue
@@ -2,7 +2,7 @@
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-1 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-symbols-outlined">close</span>
+      <span class="material-symbols">close</span>
       <span class="abs-icons icon-audiobookshelf" />
     </div>
 
@@ -38,7 +38,7 @@
         <!-- 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">{{ $strings.ButtonNext }}</span>
-          <span class="material-symbols-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" />
@@ -74,7 +74,7 @@
           <!-- 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">{{ $strings.ButtonNext }}</span>
-            <span class="material-symbols-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>
@@ -138,4 +138,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/stats/YearInReviewShort.vue b/client/components/stats/YearInReviewShort.vue
index 8a87e224..dbcd234b 100644
--- a/client/components/stats/YearInReviewShort.vue
+++ b/client/components/stats/YearInReviewShort.vue
@@ -64,7 +64,7 @@ export default {
 
       const addIcon = (icon, color, fontSize, x, y) => {
         ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Symbols Outlined`
+        ctx.font = `${fontSize} Material Symbols Rounded`
         ctx.fillText(icon, x, y)
       }
 
diff --git a/client/components/tables/BackupsTable.vue b/client/components/tables/BackupsTable.vue
index 0d2065b4..d768407f 100644
--- a/client/components/tables/BackupsTable.vue
+++ b/client/components/tables/BackupsTable.vue
@@ -23,7 +23,7 @@
             <div class="w-full flex flex-row items-center justify-center">
               <ui-btn v-if="backup.serverVersion && backup.key" small color="primary" @click="applyBackup(backup)">{{ $strings.ButtonRestore }}</ui-btn>
               <ui-tooltip v-else text="This backup was created with an old version of audiobookshelf no longer supported" direction="bottom" class="mx-2 flex items-center">
-                <span class="material-symbols-outlined text-2xl text-error">error_outline</span>
+                <span class="material-symbols text-2xl text-error">error_outline</span>
               </ui-tooltip>
 
               <button aria-label="Download Backup" class="inline-flex material-symbols text-xl mx-1 mt-1 text-white/70 hover:text-white/100" @click.stop="downloadBackup(backup)">download</button>
diff --git a/client/components/tables/ChaptersTable.vue b/client/components/tables/ChaptersTable.vue
index bc97bd84..b315758b 100644
--- a/client/components/tables/ChaptersTable.vue
+++ b/client/components/tables/ChaptersTable.vue
@@ -6,7 +6,7 @@
       <div class="flex-grow" />
       <ui-btn v-if="userCanUpdate" small :to="`/audiobook/${libraryItemId}/chapters`" color="primary" class="mr-2" @click="clickEditChapters">{{ $strings.ButtonEditChapters }}</ui-btn>
       <div v-if="!keepOpen" class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
-        <span class="material-symbols text-4xl">expand_more</span>
+        <span class="material-symbols text-4xl">&#xe313;</span>
       </div>
     </div>
     <transition name="slide">
diff --git a/client/components/tables/EbookFilesTable.vue b/client/components/tables/EbookFilesTable.vue
index 4878efba..98599267 100644
--- a/client/components/tables/EbookFilesTable.vue
+++ b/client/components/tables/EbookFilesTable.vue
@@ -8,7 +8,7 @@
       <div class="flex-grow" />
       <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
       <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
-        <span class="material-symbols text-4xl">expand_more</span>
+        <span class="material-symbols text-4xl">&#xe313;</span>
       </div>
     </div>
     <transition name="slide">
@@ -18,7 +18,7 @@
             <th class="text-left px-4">{{ $strings.LabelPath }}</th>
             <th class="text-left w-24 min-w-24">{{ $strings.LabelSize }}</th>
             <th class="text-left px-4 w-24">
-              {{ $strings.LabelRead }} <ui-tooltip :text="$strings.LabelReadEbookWithoutProgress" direction="top" class="inline-block"><span class="material-symbols-outlined text-sm align-middle">info</span></ui-tooltip>
+              {{ $strings.LabelRead }} <ui-tooltip :text="$strings.LabelReadEbookWithoutProgress" direction="top" class="inline-block"><span class="material-symbols text-sm align-middle">info</span></ui-tooltip>
             </th>
             <th v-if="showMoreColumn" class="text-center w-16"></th>
           </tr>
@@ -92,4 +92,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/tables/EbookFilesTableRow.vue b/client/components/tables/EbookFilesTableRow.vue
index 9da21863..5a390883 100644
--- a/client/components/tables/EbookFilesTableRow.vue
+++ b/client/components/tables/EbookFilesTableRow.vue
@@ -1,7 +1,7 @@
 <template>
   <tr>
     <td class="px-4">
-      {{ showFullPath ? file.metadata.path : file.metadata.relPath }} <ui-tooltip :text="$strings.LabelPrimaryEbook" class="inline-block"><span v-if="isPrimary" class="material-symbols-outlined text-success align-text-bottom">check_circle</span></ui-tooltip>
+      {{ showFullPath ? file.metadata.path : file.metadata.relPath }} <ui-tooltip :text="$strings.LabelPrimaryEbook" class="inline-block"><span v-if="isPrimary" class="material-symbols text-success align-text-bottom">check_circle</span></ui-tooltip>
     </td>
     <td>
       {{ $bytesPretty(file.metadata.size) }}
diff --git a/client/components/tables/LibraryFilesTable.vue b/client/components/tables/LibraryFilesTable.vue
index bd0f5589..49cd4959 100644
--- a/client/components/tables/LibraryFilesTable.vue
+++ b/client/components/tables/LibraryFilesTable.vue
@@ -8,7 +8,7 @@
       <div class="flex-grow" />
       <ui-btn v-if="userIsAdmin" small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2 hidden md:block" @click.stop="toggleFullPath">{{ $strings.ButtonFullPath }}</ui-btn>
       <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
-        <span class="material-symbols text-4xl">expand_more</span>
+        <span class="material-symbols text-4xl">&#xe313;</span>
       </div>
     </div>
     <transition name="slide">
@@ -103,4 +103,4 @@ export default {
     this.showFiles = this.expanded
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/tables/TracksTable.vue b/client/components/tables/TracksTable.vue
index 1f47597b..8d78227f 100644
--- a/client/components/tables/TracksTable.vue
+++ b/client/components/tables/TracksTable.vue
@@ -11,7 +11,7 @@
         <ui-btn small color="primary">{{ $strings.ButtonManageTracks }}</ui-btn>
       </nuxt-link>
       <div class="cursor-pointer h-10 w-10 rounded-full hover:bg-black-400 flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
-        <span class="material-symbols text-4xl">expand_more</span>
+        <span class="material-symbols text-4xl">&#xe313;</span>
       </div>
     </div>
     <transition name="slide">
@@ -92,4 +92,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/ui/ContextMenuDropdown.vue b/client/components/ui/ContextMenuDropdown.vue
index e6e4e6e5..e6dce4fb 100644
--- a/client/components/ui/ContextMenuDropdown.vue
+++ b/client/components/ui/ContextMenuDropdown.vue
@@ -2,7 +2,7 @@
   <div class="relative h-9 w-9" v-click-outside="clickOutsideObj">
     <slot :disabled="disabled" :showMenu="showMenu" :clickShowMenu="clickShowMenu" :processing="processing">
       <button v-if="!processing" type="button" :disabled="disabled" class="relative h-full w-full flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
-        <span class="material-symbols text-2xl" :class="iconClass">more_vert</span>
+        <span class="material-symbols text-2xl" :class="iconClass">&#xe5d4;</span>
       </button>
       <div v-else class="h-full w-full flex items-center justify-center">
         <widgets-loading-spinner />
diff --git a/client/components/ui/IconBtn.vue b/client/components/ui/IconBtn.vue
index 86fd6349..05039b8d 100644
--- a/client/components/ui/IconBtn.vue
+++ b/client/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-symbols-outlined' : 'material-symbols'" :style="{ fontSize }">{{ icon }}</span>
+    <span v-else :class="outlined ? 'material-symbols' : 'material-symbols fill'" :style="{ fontSize }" v-html="icon" />
   </button>
 </template>
 
@@ -86,4 +86,4 @@ button.icon-btn:disabled::before {
 button.icon-btn:disabled span {
   color: #777;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/components/ui/TextInput.vue b/client/components/ui/TextInput.vue
index d7524b12..7329ec09 100644
--- a/client/components/ui/TextInput.vue
+++ b/client/components/ui/TextInput.vue
@@ -23,10 +23,10 @@
       <span class="material-symbols text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
     <div v-if="type === 'password' && isHovering" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
-      <span class="material-symbols-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
+      <span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="showPassword = !showPassword">{{ !showPassword ? 'visibility' : 'visibility_off' }}</span>
     </div>
     <div v-else-if="showCopy" class="absolute top-0 right-0 h-full px-4 flex items-center justify-center">
-      <span class="material-symbols-outlined text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
+      <span class="material-symbols text-gray-400 cursor-pointer text-lg" @click.stop.prevent="copyToClipboard">{{ !hasCopied ? 'content_copy' : 'done' }}</span>
     </div>
   </div>
 </template>
diff --git a/client/components/widgets/Alert.vue b/client/components/widgets/Alert.vue
index 501d2a23..c09a86b0 100644
--- a/client/components/widgets/Alert.vue
+++ b/client/components/widgets/Alert.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full bg-opacity-5 border border-opacity-60 rounded-lg flex items-center relative py-4 pl-16" :class="wrapperClass">
     <div class="absolute top-0 left-4 h-full flex items-center">
-      <span class="material-symbols-outlined text-2xl">{{ icon }}</span>
+      <span class="material-symbols text-2xl">{{ icon }}</span>
     </div>
     <slot />
   </div>
@@ -30,4 +30,4 @@ export default {
   methods: {},
   mounted() {}
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/widgets/CoverSizeWidget.vue b/client/components/widgets/CoverSizeWidget.vue
index 22fb383c..42e60971 100644
--- a/client/components/widgets/CoverSizeWidget.vue
+++ b/client/components/widgets/CoverSizeWidget.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
-      <span class="material-symbols" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">remove</span>
+      <span class="material-symbols" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize" aria-label="Decrease Cover Size" role="button">&#xe15b;</span>
       <p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
-      <span class="material-symbols" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">add</span>
+      <span class="material-symbols" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize" aria-label="Increase Cover Size" role="button">&#xe145;</span>
     </div>
   </div>
 </template>
diff --git a/client/components/widgets/CronExpressionBuilder.vue b/client/components/widgets/CronExpressionBuilder.vue
index 610372ab..e49d3688 100644
--- a/client/components/widgets/CronExpressionBuilder.vue
+++ b/client/components/widgets/CronExpressionBuilder.vue
@@ -30,14 +30,14 @@
 
         <div class="flex items-center justify-center">
           <widgets-loading-spinner v-if="isValidating" class="mr-2" />
-          <span v-else class="material-symbols-outlined mr-2 text-xl" :class="isValid ? 'text-success' : 'text-error'">{{ isValid ? 'check_circle_outline' : 'error_outline' }}</span>
+          <span v-else class="material-symbols mr-2 text-xl" :class="isValid ? 'text-success' : 'text-error'">{{ isValid ? 'check_circle_outline' : 'error_outline' }}</span>
           <p v-if="isValidating" class="text-gray-300 text-base md:text-lg text-center">{{ $strings.MessageCheckingCron }}</p>
           <p v-else-if="customCronError" class="text-error text-base md:text-lg text-center">{{ customCronError }}</p>
           <p v-else class="text-success text-base md:text-lg text-center">{{ $strings.MessageValidCronExpression }}</p>
         </div>
       </template>
       <div v-if="cronExpression && isValid" class="flex items-center justify-center text-yellow-400 mt-2">
-        <span class="material-symbols-outlined mr-2 text-xl">event</span>
+        <span class="material-symbols mr-2 text-xl">event</span>
         <p>{{ $strings.LabelNextScheduledRun }}: {{ nextRun }}</p>
       </div>
     </div>
diff --git a/client/pages/audiobook/_id/chapters.vue b/client/pages/audiobook/_id/chapters.vue
index 79017017..c5da643a 100644
--- a/client/pages/audiobook/_id/chapters.vue
+++ b/client/pages/audiobook/_id/chapters.vue
@@ -71,7 +71,7 @@
               <div class="flex items-center">
                 <ui-tooltip :text="$strings.MessageRemoveChapter" direction="bottom">
                   <button v-if="newChapters.length > 1" class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-error transform hover:scale-110 duration-150" @click="removeChapter(chapter)">
-                    <span class="material-symbols-outlined text-base">remove</span>
+                    <span class="material-symbols text-base">remove</span>
                   </button>
                 </ui-tooltip>
 
@@ -84,14 +84,14 @@
                 <ui-tooltip :text="selectedChapterId === chapter.id && isPlayingChapter ? $strings.MessagePauseChapter : $strings.MessagePlayChapter" direction="bottom">
                   <button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150" @click="playChapter(chapter)">
                     <widgets-loading-spinner v-if="selectedChapterId === chapter.id && isLoadingChapter" />
-                    <span v-else-if="selectedChapterId === chapter.id && isPlayingChapter" class="material-symbols-outlined text-base">pause</span>
-                    <span v-else class="material-symbols-outlined text-base">play_arrow</span>
+                    <span v-else-if="selectedChapterId === chapter.id && isPlayingChapter" class="material-symbols text-base">pause</span>
+                    <span v-else class="material-symbols text-base">play_arrow</span>
                   </button>
                 </ui-tooltip>
 
                 <ui-tooltip v-if="chapter.error" :text="chapter.error" direction="left">
                   <button class="w-7 h-7 rounded-full flex items-center justify-center text-error">
-                    <span class="material-symbols-outlined text-lg">error_outline</span>
+                    <span class="material-symbols text-lg">error_outline</span>
                   </button>
                 </ui-tooltip>
               </div>
@@ -106,7 +106,7 @@
           <div class="flex-grow" />
           <ui-btn small @click="setChaptersFromTracks">{{ $strings.ButtonSetChaptersFromTracks }}</ui-btn>
           <ui-tooltip :text="$strings.MessageSetChaptersFromTracksDescription" direction="top" class="flex items-center mx-1 cursor-default">
-            <span class="material-symbols-outlined text-xl text-gray-200">info</span>
+            <span class="material-symbols text-xl text-gray-200">info</span>
           </ui-tooltip>
         </div>
         <div class="flex text-xs uppercase text-gray-300 font-semibold mb-2">
@@ -189,7 +189,7 @@
           <div class="flex items-center pt-2">
             <ui-btn small color="primary" class="mr-1" @click="applyChapterNamesOnly">{{ $strings.ButtonMapChapterTitles }}</ui-btn>
             <ui-tooltip :text="$strings.MessageMapChapterTitles" direction="top" class="flex items-center">
-              <span class="material-symbols-outlined text-xl text-gray-200">info</span>
+              <span class="material-symbols text-xl text-gray-200">info</span>
             </ui-tooltip>
             <div class="flex-grow" />
             <ui-btn small color="success" @click="applyChapterData">{{ $strings.ButtonApplyChapters }}</ui-btn>
diff --git a/client/pages/config/backups.vue b/client/pages/config/backups.vue
index 44a92f2e..d74dc4d6 100644
--- a/client/pages/config/backups.vue
+++ b/client/pages/config/backups.vue
@@ -3,7 +3,7 @@
     <app-settings-content :header-text="$strings.HeaderBackups" :description="$strings.MessageBackupsDescription">
       <div v-if="backupLocation" class="mb-4 max-w-full overflow-hidden">
         <div class="flex items-center mb-0.5">
-          <span class="material-symbols-outlined text-2xl text-black-50 mr-2">folder</span>
+          <span class="material-symbols text-2xl text-black-50 mr-2">folder</span>
           <span class="text-white text-opacity-60 uppercase text-sm whitespace-nowrap">{{ $strings.LabelBackupLocation }}:</span>
         </div>
         <div v-if="!showEditBackupPath" class="inline-flex items-center w-full overflow-hidden">
@@ -33,7 +33,7 @@
 
       <div v-if="enableBackups" class="mb-6">
         <div class="flex items-center pl-0 sm:pl-6 mb-2">
-          <span class="material-symbols-outlined text-xl sm:text-2xl text-black-50 mr-2">schedule</span>
+          <span class="material-symbols text-xl sm:text-2xl text-black-50 mr-2">schedule</span>
           <div class="w-32 min-w-32 sm:w-40 sm:min-w-40">
             <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.HeaderSchedule }}:</span>
           </div>
@@ -44,7 +44,7 @@
         </div>
 
         <div v-if="nextBackupDate" class="flex items-center pl-0 sm:pl-6 py-0.5">
-          <span class="material-symbols-outlined text-xl sm:text-2xl text-black-50 mr-2">event</span>
+          <span class="material-symbols text-xl sm:text-2xl text-black-50 mr-2">event</span>
           <div class="w-32 min-w-32 sm:w-40 sm:min-w-40">
             <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span>
           </div>
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index f51fc8dd..c4df6df9 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -20,7 +20,7 @@
 
         <div class="flex p-2">
           <div class="hidden sm:block">
-            <span class="hidden sm:block material-symbols-outlined text-5xl lg:text-6xl">event</span>
+            <span class="hidden sm:block material-symbols text-5xl lg:text-6xl">event</span>
           </div>
           <div class="px-1">
             <p class="text-4xl md:text-5xl font-bold">{{ $formatNumber(totalDaysListened) }}</p>
@@ -30,7 +30,7 @@
 
         <div class="flex p-2">
           <div class="hidden sm:block">
-            <span class="material-symbols-outlined text-5xl lg:text-6xl">watch_later</span>
+            <span class="material-symbols text-5xl lg:text-6xl">watch_later</span>
           </div>
           <div class="px-1">
             <p class="text-4xl md:text-5xl font-bold">{{ $formatNumber(totalMinutesListening) }}</p>
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 416b0e08..6b58135b 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -80,14 +80,14 @@
             <p class="text-gray-400 text-xs pt-1">{{ $strings.LabelStarted }} {{ $formatDate(userProgressStartedAt, dateFormat) }}</p>
 
             <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
-              <span class="material-symbols text-sm">close</span>
+              <span class="material-symbols text-sm">&#xe5cd;</span>
             </div>
           </div>
 
           <!-- Icon buttons -->
           <div class="flex items-center justify-center md:justify-start pt-4">
             <ui-btn v-if="showPlayButton" :disabled="isStreaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playItem">
-              <span v-show="!isStreaming" class="material-symbols fill text-2xl -ml-2 pr-1 text-white">play_arrow</span>
+              <span v-show="!isStreaming" class="material-symbols fill text-2xl -ml-2 pr-1 text-white">&#xe037;</span>
               {{ isStreaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
             </ui-btn>
 
@@ -106,7 +106,7 @@
             </ui-btn>
 
             <ui-tooltip v-if="userCanUpdate" :text="$strings.LabelEdit" direction="top">
-              <ui-icon-btn icon="edit" class="mx-0.5" @click="editClick" />
+              <ui-icon-btn icon="&#xe3c9;" outlined class="mx-0.5" @click="editClick" />
             </ui-tooltip>
 
             <ui-tooltip v-if="!isPodcast && !isMusic" :text="userIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="top">
@@ -121,7 +121,7 @@
             <ui-context-menu-dropdown v-if="contextMenuItems.length" :items="contextMenuItems" :menu-width="148" @action="contextMenuAction">
               <template #default="{ showMenu, clickShowMenu, disabled }">
                 <button type="button" :disabled="disabled" class="mx-0.5 icon-btn bg-primary border border-gray-600 w-9 h-9 rounded-md flex items-center justify-center relative" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
-                  <span class="material-symbols text-2xl">more_horiz</span>
+                  <span class="material-symbols text-2xl">&#xe5d3;</span>
                 </button>
               </template>
             </ui-context-menu-dropdown>
@@ -129,9 +129,7 @@
 
           <div class="my-4 w-full">
             <p ref="description" id="item-description" dir="auto" class="text-base text-gray-100 whitespace-pre-line mb-1" :class="{ 'show-full': showFullDescription }">{{ description }}</p>
-            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">
-              {{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }} <span class="material-symbols text-xl pl-1">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
-            </button>
+            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">{{ showFullDescription ? $strings.ButtonReadLess : $strings.ButtonReadMore }} <span class="material-symbols text-xl pl-1" v-html="showFullDescription ? 'expand_less' : '&#xe313;'" /></button>
           </div>
 
           <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" class="mt-6" />
diff --git a/client/pages/library/_library/podcast/latest.vue b/client/pages/library/_library/podcast/latest.vue
index e0637578..800e7bfd 100644
--- a/client/pages/library/_library/podcast/latest.vue
+++ b/client/pages/library/_library/podcast/latest.vue
@@ -57,7 +57,7 @@
                 <ui-tooltip v-if="libraryItemIdStreaming && !isStreamingFromDifferentLibrary" :text="playerQueueEpisodeIdMap[episode.id] ? $strings.MessageRemoveFromPlayerQueue : $strings.MessageAddToPlayerQueue" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" direction="top">
                   <ui-icon-btn :icon="playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_play'" borderless @click="queueBtnClick(episode)" />
                   <!-- <button class="h-8 w-8 flex justify-center items-center mx-2" :class="playerQueueEpisodeIdMap[episode.id] ? 'text-success' : ''" @click.stop="queueBtnClick(episode)">
-                    <span class="material-symbols-outlined text-2xl">{{ playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_add' }}</span>
+                    <span class="material-symbols text-2xl">{{ playerQueueEpisodeIdMap[episode.id] ? 'playlist_add_check' : 'playlist_add' }}</span>
                   </button> -->
                 </ui-tooltip>
 
diff --git a/client/static/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 b/client/static/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
deleted file mode 100644
index f62e84aa..00000000
Binary files a/client/static/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2 and /dev/null differ
diff --git a/client/static/fonts/MaterialSymbolsRounded.woff2 b/client/static/fonts/MaterialSymbolsRounded.woff2
new file mode 100644
index 00000000..88a9a81f
Binary files /dev/null and b/client/static/fonts/MaterialSymbolsRounded.woff2 differ
diff --git a/client/static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 b/client/static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2
deleted file mode 100644
index 02f60c32..00000000
Binary files a/client/static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 and /dev/null differ