refactor(web): material icons (#4636)

web/src/lib/components/album-page/album-card.svelte

@@ -3,10 +3,11 @@
   import { locale } from '$lib/stores/preferences.store';
   import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
   import { createEventDispatcher, onMount } from 'svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
   import IconButton from '../elements/buttons/icon-button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import type { OnClick, OnShowContextMenu } from './album-card';
   import { getContextMenuPosition } from '../../utils/context-menu';
+  import { mdiDotsVertical } from '@mdi/js';
 
   export let album: AlbumResponseDto;
   export let isSharingView = false;
@@ -75,7 +76,7 @@
       data-testid="context-button-parent"
     >
       <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>
     </div>
   {/if}

web/src/lib/components/album-page/album-viewer.svelte

@@ -7,8 +7,6 @@
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import { TimeBucketSize, type AlbumResponseDto, type SharedLinkResponseDto } from '@api';
   import { onDestroy, onMount } from 'svelte';
-  import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
-  import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
   import { dateFormats } from '../../constants';
   import { createAssetInteractionStore } from '../../stores/asset-interaction.store';
   import { AssetStore } from '../../stores/assets.store';
@@ -21,6 +19,7 @@
   import ImmichLogo from '../shared-components/immich-logo.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
+  import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
 
   export let sharedLink: SharedLinkResponseDto;
 
@@ -122,12 +121,12 @@
           <CircleIconButton
             title="Add Photos"
             on:click={() => openFileUploadDialog(album.id)}
-            logo={FileImagePlusOutline}
+            icon={mdiFileImagePlusOutline}
           />
         {/if}
 
         {#if album.assetCount > 0 && sharedLink.allowDownload}
-          <CircleIconButton title="Download" on:click={() => downloadAlbum()} logo={FolderDownloadOutline} />
+          <CircleIconButton title="Download" on:click={() => downloadAlbum()} icon={mdiFolderDownloadOutline} />
         {/if}
 
         <ThemeButton />

web/src/lib/components/album-page/share-info-modal.svelte

@@ -3,7 +3,6 @@
   import { AlbumResponseDto, api, UserResponseDto } from '@api';
   import BaseModal from '../shared-components/base-modal.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
@@ -11,6 +10,7 @@
   import { handleError } from '../../utils/handle-error';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { getContextMenuPosition } from '../../utils/context-menu';
+  import { mdiDotsVertical } from '@mdi/js';
 
   export let album: AlbumResponseDto;
 
@@ -99,7 +99,7 @@
               <div>
                 <CircleIconButton
                   on:click={(event) => showContextMenu(event, user)}
-                  logo={DotsVertical}
+                  icon={mdiDotsVertical}
                   backgroundColor="transparent"
                   hoverColor="#e2e7e9"
                   size="20"

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -3,12 +3,12 @@
   import { AlbumResponseDto, api, SharedLinkResponseDto, UserResponseDto } from '@api';
   import BaseModal from '../shared-components/base-modal.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import Link from 'svelte-material-icons/Link.svelte';
-  import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
   import { goto } from '$app/navigation';
   import ImmichLogo from '../shared-components/immich-logo.svelte';
   import Button from '../elements/buttons/button.svelte';
   import { AppRoute } from '$lib/constants';
+  import { mdiLink, mdiShareCircle } from '@mdi/js';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   export let album: AlbumResponseDto;
   let users: UserResponseDto[] = [];
@@ -128,7 +128,7 @@
       class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
       on:click={() => dispatch('share')}
     >
-      <Link size={24} />
+      <Icon path={mdiLink} size={24} />
       <p class="text-sm">Create link</p>
     </button>
 
@@ -137,7 +137,7 @@
         class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
         on:click={() => goto(AppRoute.SHARED_LINKS)}
       >
-        <ShareCircle size={24} />
+        <Icon path={mdiShareCircle} size={24} />
         <p class="text-sm">View links</p>
       </button>
     {/if}