refactor(web): material icons (#4636)

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -6,15 +6,14 @@
   import { fly } from 'svelte/transition';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import Button from '../elements/buttons/button.svelte';
-  import Merge from 'svelte-material-icons/Merge.svelte';
-  import CallMerge from 'svelte-material-icons/CallMerge.svelte';
   import { flip } from 'svelte/animate';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { goto, invalidateAll } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
-  import SwapHorizontal from 'svelte-material-icons/SwapHorizontal.svelte';
+  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   export let person: PersonResponseDto;
   let people: PersonResponseDto[] = [];
@@ -104,7 +103,7 @@
           isShowConfirmation = true;
         }}
       >
-        <Merge size={18} />
+        <Icon path={mdiMerge} size={18} />
         <span class="ml-2"> Merge</span></Button
       >
     </svelte:fragment>
@@ -123,10 +122,10 @@
 
           {#if hasSelection}
             <span class="grid grid-cols-1"
-              ><CallMerge size={48} class="rotate-90 dark:text-white" />
+              ><Icon path={mdiCallMerge} size={48} class="rotate-90 dark:text-white" />
               {#if selectedPeople.length === 1}
                 <button class="flex justify-center" on:click={handleSwapPeople}
-                  ><SwapHorizontal size={24} class="dark:text-white" />
+                  ><Icon path={mdiSwapHorizontal} size={24} class="dark:text-white" />
                 </button>
               {/if}
             </span>

web/src/lib/components/faces-page/merge-suggestion-modal.svelte

@@ -2,12 +2,11 @@
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { api, type PersonResponseDto } from '@api';
   import { createEventDispatcher } from 'svelte';
-  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-  import Close from 'svelte-material-icons/Close.svelte';
-  import Merge from 'svelte-material-icons/Merge.svelte';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { mdiArrowLeft, mdiClose, mdiMerge } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   const dispatch = createEventDispatcher<{
     reject: void;
@@ -40,7 +39,7 @@
           Merge faces - {title}
         </h1>
         <div class="p-2">
-          <CircleIconButton logo={Close} on:click={() => dispatch('close')} />
+          <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
         </div>
       </div>
 
@@ -57,7 +56,7 @@
           </div>
           <div class="mx-0.5 flex md:mx-2">
             <CircleIconButton
-              logo={Merge}
+              icon={mdiMerge}
               on:click={() => ([personMerge1, personMerge2] = [personMerge2, personMerge1])}
             />
           </div>
@@ -83,7 +82,7 @@
         {:else}
           <div class="grid w-full grid-cols-1 gap-2">
             <div class="px-2">
-              <button on:click={() => (choosePersonToMerge = false)}> <ArrowLeft /></button>
+              <button on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
             </div>
             <div class="flex items-center justify-center">
               <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">

web/src/lib/components/faces-page/people-card.svelte

@@ -3,12 +3,13 @@
   import { getContextMenuPosition } from '$lib/utils/context-menu';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import IconButton from '../elements/buttons/icon-button.svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import Portal from '../shared-components/portal/portal.svelte';
   import { createEventDispatcher } from 'svelte';
   import { AppRoute } from '$lib/constants';
+  import { mdiDotsVertical } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   export let person: PersonResponseDto;
 
@@ -71,7 +72,7 @@
     id={`icon-${person.id}`}
   >
     <IconButton color="transparent-primary">
-      <DotsVertical size="20" class="icon-white-drop-shadow" color="white" />
+      <Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
     </IconButton>
   </button>
 </div>

web/src/lib/components/faces-page/set-birth-date-modal.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
-  import Cake from 'svelte-material-icons/Cake.svelte';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import { mdiCake } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   export let birthDate: string;
 
@@ -22,7 +23,7 @@
     <div
       class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
     >
-      <Cake size="4em" />
+      <Icon path={mdiCake} size="4em" />
       <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Set date of birth</h1>
 
       <p class="text-sm dark:text-immich-dark-fg">

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>