diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 49adbbed..b7747f2c 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -4,7 +4,7 @@
       <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-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">arrow_drop_down</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-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
diff --git a/components/connection/ServerConnectForm.vue b/components/connection/ServerConnectForm.vue
index 2c60488c..0c35b158 100644
--- a/components/connection/ServerConnectForm.vue
+++ b/components/connection/ServerConnectForm.vue
@@ -9,7 +9,7 @@
             <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-symbols 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 -->
diff --git a/components/modals/SleepTimerModal.vue b/components/modals/SleepTimerModal.vue
index 188cb749..9e74b11c 100644
--- a/components/modals/SleepTimerModal.vue
+++ b/components/modals/SleepTimerModal.vue
@@ -13,9 +13,9 @@
             <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-symbols">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-symbols">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-symbols">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-symbols">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/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/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/playlist/ItemTableRow.vue b/components/tables/playlist/ItemTableRow.vue
index 13f6faa0..953a0038 100644
--- a/components/tables/playlist/ItemTableRow.vue
+++ b/components/tables/playlist/ItemTableRow.vue
@@ -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-symbols">more_vert</span>
+            <span class="material-symbols text-2xl">more_vert</span>
           </button>
         </div>
       </nuxt-link>
diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index a0264a5c..92895276 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -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-symbols align-middle text-base -mt-px">{{ showFullDescription ? 'arrow_drop_down' : 'arrow_drop_up' }}</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 8e31b742..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-symbols" @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>
diff --git a/pages/localMedia/folders/index.vue b/pages/localMedia/folders/index.vue
index 7b25ddbc..301c84c3 100644
--- a/pages/localMedia/folders/index.vue
+++ b/pages/localMedia/folders/index.vue
@@ -4,7 +4,7 @@
       <h1 class="text-base font-semibold px-2">
         {{ $strings.HeaderLocalFolders }}
       </h1>
-      <button type="button" class="material-symbols" @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">
diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index fdd777fd..1704cfdb 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -8,7 +8,7 @@
         <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-symbols fill" style="font-size: 2rem">play_arrow</span>
         </button>
-        <span class="material-symbols" @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>
@@ -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-symbols" @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-symbols" @click="showTrackDialog(episode)">more_vert</span>
+                <span class="material-symbols text-2xl" @click="showTrackDialog(episode)">more_vert</span>
               </div>
             </div>
           </template>
diff --git a/pages/settings.vue b/pages/settings.vue
index 20133483..5c3c75ae 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -59,7 +59,7 @@
         <ui-toggle-switch v-model="settings.enableMp3IndexSeeking" @input="saveSettings" />
       </div>
       <p class="pl-4">{{ $strings.LabelEnableMp3IndexSeeking }}</p>
-      <span class="material-symbols 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-symbols 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>
@@ -90,7 +90,7 @@
         <ui-toggle-switch v-model="settings.disableSleepTimerFadeOut" @input="saveSettings" />
       </div>
       <p class="pl-4">{{ $strings.LabelDisableAudioFadeOut }}</p>
-      <span class="material-symbols ml-2" @click.stop="showInfo('disableSleepTimerFadeOut')">info</span>
+      <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">
@@ -98,14 +98,14 @@
           <ui-toggle-switch v-model="settings.disableSleepTimerResetFeedback" @input="saveSettings" />
         </div>
         <p class="pl-4">{{ $strings.LabelDisableVibrateOnReset }}</p>
-        <span class="material-symbols 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-symbols 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-symbols 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-symbols 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