Replace material-icons class with material-symbols class in components

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-icons-outlined text-2xl">{{ icon }}</span>
+      <span class="material-symbols-outlined text-2xl">{{ icon }}</span>
     </div>
     <slot />
   </div>

client/components/widgets/AlreadyInLibraryIndicator.vue

@@ -1,6 +1,6 @@
 <template>
   <ui-tooltip v-if="alreadyInLibrary" :text="$strings.LabelAlreadyInYourLibrary" direction="top">
-    <span class="material-icons ml-1 text-success" style="font-size: 0.8rem">check_circle</span>
+    <span class="material-symbols ml-1 text-success" style="font-size: 0.8rem">check_circle</span>
   </ui-tooltip>
 </template>
 

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-icons" :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">remove</span>
       <p class="px-2 font-mono" style="font-size: 1rem">{{ bookCoverWidth }}</p>
-      <span class="material-icons" :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">add</span>
     </div>
   </div>
 </template>

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-icons-outlined mr-2 text-xl" :class="isValid ? 'text-success' : 'text-error'">{{ isValid ? 'check_circle_outline' : 'error_outline' }}</span>
+          <span v-else class="material-symbols-outlined 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-icons-outlined mr-2 text-xl">event</span>
+        <span class="material-symbols-outlined mr-2 text-xl">event</span>
         <p>{{ $strings.LabelNextScheduledRun }}: {{ nextRun }}</p>
       </div>
     </div>

client/components/widgets/ItemSlider.vue

@@ -4,10 +4,10 @@
       <slot />
       <div class="flex-grow" />
       <button cy-id="leftScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollLeft ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollLeft">
-        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_left</span>
+        <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">chevron_left</span>
       </button>
       <button cy-id="rightScrollButton" v-if="isScrollable" class="w-8e h-8e mx-1e flex items-center justify-center rounded-full" :class="canScrollRight ? 'hover:bg-white hover:bg-opacity-5 text-gray-300 hover:text-white' : 'text-white text-opacity-40 cursor-text'" @click="scrollRight">
-        <span class="material-icons" :style="{ fontSize: 1.5 + 'em' }">chevron_right</span>
+        <span class="material-symbols" :style="{ fontSize: 1.5 + 'em' }">chevron_right</span>
       </button>
     </div>
     <div cy-id="slider" ref="slider" class="w-full overflow-y-hidden overflow-x-auto no-scroll" style="scroll-behavior: smooth" @scroll="scrolled">

client/components/widgets/NotificationWidget.vue

@@ -6,7 +6,7 @@
           <widgets-loading-spinner />
         </ui-tooltip>
         <ui-tooltip v-else text="Activities" direction="bottom" class="flex items-center">
-          <span class="material-icons text-1.5xl" aria-label="Activities" role="button">notifications</span>
+          <span class="material-symbols text-1.5xl" aria-label="Activities" role="button">notifications</span>
         </ui-tooltip>
       </div>
       <div v-if="showUnseenSuccessIndicator" class="w-2 h-2 rounded-full bg-success pointer-events-none absolute -top-1 -right-0.5" />

client/components/widgets/PodcastTypeIndicator.vue

@@ -2,12 +2,12 @@
   <div>
     <template v-if="type == 'bonus'">
       <ui-tooltip text="Bonus" direction="top">
-        <span class="material-icons ml-1" style="font-size: 0.8rem">local_play</span>
+        <span class="material-symbols ml-1" style="font-size: 0.8rem">local_play</span>
       </ui-tooltip>
     </template>
     <template v-if="type == 'trailer'">
       <ui-tooltip text="Trailer" direction="top">
-        <span class="material-icons ml-1" style="font-size: 0.8rem">local_movies</span>
+        <span class="material-symbols ml-1" style="font-size: 0.8rem">local_movies</span>
       </ui-tooltip>
     </template>
   </div>