Replace all material-icons with material-symbols

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>

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>

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>
+</script>

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 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>
+</script>

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" />

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">

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>
 

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 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" :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">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)
     })
   }

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 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">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" :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">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_down' : 'arrow_drop_up' }}</span>
           </div>
         </div>
 

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" @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>
+</style>

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" @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">

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" @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" @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" @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)

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 px-1" :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>
 

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 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>
+</script>

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