refactor(web): material icons (#4636)

web/src/lib/components/user-settings-page/device-card.svelte

@@ -3,14 +3,17 @@
   import type { AuthDeviceResponseDto } from '@api';
   import { DateTime, ToRelativeCalendarOptions } from 'luxon';
   import { createEventDispatcher } from 'svelte';
-  import Android from 'svelte-material-icons/Android.svelte';
-  import Apple from 'svelte-material-icons/Apple.svelte';
-  import AppleSafari from 'svelte-material-icons/AppleSafari.svelte';
-  import GoogleChrome from 'svelte-material-icons/GoogleChrome.svelte';
-  import Help from 'svelte-material-icons/Help.svelte';
-  import Linux from 'svelte-material-icons/Linux.svelte';
-  import MicrosoftWindows from 'svelte-material-icons/MicrosoftWindows.svelte';
-  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import {
+    mdiAndroid,
+    mdiApple,
+    mdiAppleSafari,
+    mdiMicrosoftWindows,
+    mdiLinux,
+    mdiGoogleChrome,
+    mdiTrashCanOutline,
+    mdiHelp,
+  } from '@mdi/js';
 
   export let device: AuthDeviceResponseDto;
 
@@ -26,19 +29,19 @@
   <!-- TODO: Device Image -->
   <div class="hidden items-center justify-center pr-2 text-immich-primary dark:text-immich-dark-primary sm:flex">
     {#if device.deviceOS === 'Android'}
-      <Android size="40" />
+      <Icon path={mdiAndroid} size="40" />
     {:else if device.deviceOS === 'iOS' || device.deviceOS === 'Mac OS'}
-      <Apple size="40" />
+      <Icon path={mdiApple} size="40" />
     {:else if device.deviceOS.indexOf('Safari') !== -1}
-      <AppleSafari size="40" />
+      <Icon path={mdiAppleSafari} size="40" />
     {:else if device.deviceOS.indexOf('Windows') !== -1}
-      <MicrosoftWindows size="40" />
+      <Icon path={mdiMicrosoftWindows} size="40" />
     {:else if device.deviceOS === 'Linux'}
-      <Linux size="40" />
+      <Icon path={mdiLinux} size="40" />
     {:else if device.deviceOS === 'Chromium OS' || device.deviceType === 'Chrome' || device.deviceType === 'Chromium'}
-      <GoogleChrome size="40" />
+      <Icon path={mdiGoogleChrome} size="40" />
     {:else}
-      <Help size="40" />
+      <Icon path={mdiHelp} size="40" />
     {/if}
   </div>
   <div class="flex grow flex-row justify-between gap-1 pl-4 sm:pl-0">
@@ -62,7 +65,7 @@
           class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
           title="Log out"
         >
-          <TrashCanOutline size="16" />
+          <Icon path={mdiTrashCanOutline} size="16" />
         </button>
       </div>
     {/if}

web/src/lib/components/user-settings-page/library-list.svelte

@@ -6,9 +6,7 @@
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { fade } from 'svelte/transition';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-  import Database from 'svelte-material-icons/Database.svelte';
-  import Upload from 'svelte-material-icons/Upload.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import Pulse from 'svelte-loading-spinners/Pulse.svelte';
   import { slide } from 'svelte/transition';
   import LibraryImportPathsForm from '../forms/library-import-paths-form.svelte';
@@ -19,6 +17,7 @@
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
+  import { mdiDatabase, mdiDotsVertical, mdiUpload } from '@mdi/js';
 
   let libraries: LibraryResponseDto[] = [];
 
@@ -317,9 +316,9 @@
             >
               <td class="w-1/6 px-10 text-sm">
                 {#if library.type === LibraryType.External}
-                  <Database size="40" title="External library (created on {library.createdAt})" />
+                  <Icon path={mdiDatabase} size="40" title="External library (created on {library.createdAt})" />
                 {:else if library.type === LibraryType.Upload}
-                  <Upload size="40" title="Upload library (created on {library.createdAt})" />
+                  <Icon path={mdiUpload} size="40" title="Upload library (created on {library.createdAt})" />
                 {/if}</td
               >
 
@@ -340,7 +339,7 @@
                   class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                   on:click|stopPropagation|preventDefault={(e) => showMenu(e, library, index)}
                 >
-                  <DotsVertical size="16" />
+                  <Icon path={mdiDotsVertical} size="16" />
                 </button>
 
                 {#if showContextMenu}

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { UserResponseDto, api } from '@api';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import Close from 'svelte-material-icons/Close.svelte';
   import Button from '../elements/buttons/button.svelte';
   import PartnerSelectionModal from './partner-selection-modal.svelte';
   import { handleError } from '../../utils/handle-error';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { mdiClose } from '@mdi/js';
 
   export let user: UserResponseDto;
 
@@ -64,7 +64,7 @@
           </div>
           <CircleIconButton
             on:click={() => (removePartner = partner)}
-            logo={Close}
+            icon={mdiClose}
             size={'16'}
             title="Remove partner"
           />

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { api, APIKeyResponseDto } from '@api';
-  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
-  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
   import APIKeyForm from '../forms/api-key-form.svelte';
@@ -10,6 +9,7 @@
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import { locale } from '$lib/stores/preferences.store';
   import Button from '../elements/buttons/button.svelte';
+  import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
 
   export let keys: APIKeyResponseDto[];
 
@@ -143,13 +143,13 @@
                     on:click={() => (editKey = key)}
                     class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                   >
-                    <PencilOutline size="16" />
+                    <Icon path={mdiPencilOutline} size="16" />
                   </button>
                   <button
                     on:click={() => (deleteKey = key)}
                     class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                   >
-                    <TrashCanOutline size="16" />
+                    <Icon path={mdiTrashCanOutline} size="16" />
                   </button>
                 </td>
               </tr>