refactor(web): material icons (#4636)

web/src/lib/components/faces-page/show-hide.svelte

@@ -2,13 +2,10 @@
   import { fly } from 'svelte/transition';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { quintOut } from 'svelte/easing';
-  import Close from 'svelte-material-icons/Close.svelte';
   import IconButton from '../elements/buttons/icon-button.svelte';
   import { createEventDispatcher } from 'svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-  import Restart from 'svelte-material-icons/Restart.svelte';
-  import Eye from 'svelte-material-icons/Eye.svelte';
-  import EyeOff from 'svelte-material-icons/EyeOff.svelte';
+  import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
 
   const dispatch = createEventDispatcher();
 
@@ -24,15 +21,19 @@
     class="sticky top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
   >
     <div class="flex items-center">
-      <CircleIconButton logo={Close} on:click={() => dispatch('closeClick')} />
+      <CircleIconButton icon={mdiClose} on:click={() => dispatch('closeClick')} />
       <p class="ml-4 hidden sm:block">Show & hide faces</p>
     </div>
     <div class="flex items-center justify-end">
       <div class="flex items-center md:mr-8">
-        <CircleIconButton title="Reset faces visibility" logo={Restart} on:click={() => dispatch('reset-visibility')} />
+        <CircleIconButton
+          title="Reset faces visibility"
+          icon={mdiRestart}
+          on:click={() => dispatch('reset-visibility')}
+        />
         <CircleIconButton
           title="Toggle visibility"
-          logo={toggleVisibility ? Eye : EyeOff}
+          icon={toggleVisibility ? mdiEye : mdiEyeOff}
           on:click={() => dispatch('toggle-visibility')}
         />
       </div>