refactor(web): material icons (#4636)

web/src/routes/(user)/albums/+page.svelte

@@ -16,11 +16,7 @@
   import { goto } from '$app/navigation';
   import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-  import FormatListBulletedSquare from 'svelte-material-icons/FormatListBulletedSquare.svelte';
-  import ViewGridOutline from 'svelte-material-icons/ViewGridOutline.svelte';
   import type { PageData } from './$types';
-  import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
   import { useAlbums } from './albums.bloc';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@@ -37,13 +33,20 @@
   } from '$lib/components/shared-components/notification/notification';
   import type { AlbumResponseDto } from '@api';
   import TableHeader from '$lib/components/elements/table-header.svelte';
-  import ArrowDownThin from 'svelte-material-icons/ArrowDownThin.svelte';
-  import ArrowUpThin from 'svelte-material-icons/ArrowUpThin.svelte';
-  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
-  import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import { orderBy } from 'lodash-es';
+  import {
+    mdiPlusBoxOutline,
+    mdiArrowDownThin,
+    mdiArrowUpThin,
+    mdiFormatListBulletedSquare,
+    mdiPencilOutline,
+    mdiTrashCanOutline,
+    mdiViewGridOutline,
+    mdiDeleteOutline,
+  } from '@mdi/js';
 
   export let data: PageData;
   let shouldShowEditUserForm = false;
@@ -210,7 +213,7 @@
   <div class="flex place-items-center gap-2" slot="buttons">
     <LinkButton on:click={handleCreateAlbum}>
       <div class="flex place-items-center gap-2 text-sm">
-        <PlusBoxOutline size="18" />
+        <Icon path={mdiPlusBoxOutline} size="18" />
         Create album
       </div>
     </LinkButton>
@@ -220,7 +223,7 @@
       render={(option) => {
         return {
           title: option.sortTitle,
-          icon: option.sortDesc ? ArrowDownThin : ArrowUpThin,
+          icon: option.sortDesc ? mdiArrowDownThin : mdiArrowUpThin,
         };
       }}
       on:select={(event) => {
@@ -236,10 +239,10 @@
     <LinkButton on:click={() => handleChangeListMode()}>
       <div class="flex place-items-center gap-2 text-sm">
         {#if $albumViewSettings.view === AlbumViewMode.List}
-          <ViewGridOutline size="18" />
+          <Icon path={mdiViewGridOutline} size="18" />
           <p class="hidden sm:block">Cover</p>
         {:else}
-          <FormatListBulletedSquare size="18" />
+          <Icon path={mdiFormatListBulletedSquare} size="18" />
           <p class="hidden sm:block">List</p>
         {/if}
       </div>
@@ -293,13 +296,13 @@
                 on:click|stopPropagation={() => handleEdit(album)}
                 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|stopPropagation={() => chooseAlbumToDelete(album)}
                 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>
@@ -323,7 +326,7 @@
   <ContextMenu {...$contextMenuPosition} on:outclick={closeAlbumContextMenu} on:escape={closeAlbumContextMenu}>
     <MenuOption on:click={() => setAlbumToDelete()}>
       <span class="flex place-content-center place-items-center gap-2">
-        <DeleteOutline size="18" />
+        <Icon path={mdiDeleteOutline} size="18" />
         <p>Delete album</p>
       </span>
     </MenuOption>

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -35,17 +35,20 @@
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
   import { TimeBucketSize, UserResponseDto, api } from '@api';
-  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-  import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-  import FileImagePlusOutline from 'svelte-material-icons/FileImagePlusOutline.svelte';
-  import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
-  import Link from 'svelte-material-icons/Link.svelte';
-  import Plus from 'svelte-material-icons/Plus.svelte';
-  import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
   import { getContextMenuPosition } from '$lib/utils/context-menu';
+  import {
+    mdiPlus,
+    mdiDotsVertical,
+    mdiArrowLeft,
+    mdiFileImagePlusOutline,
+    mdiShareVariantOutline,
+    mdiDeleteOutline,
+    mdiFolderDownloadOutline,
+    mdiLink,
+  } from '@mdi/js';
 
   export let data: PageData;
 
@@ -313,11 +316,11 @@
     <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
       <CreateSharedLink />
       <SelectAllAssets {assetStore} {assetInteractionStore} />
-      <AssetSelectContextMenu icon={Plus} title="Add">
+      <AssetSelectContextMenu icon={mdiPlus} title="Add">
         <AddToAlbum />
         <AddToAlbum shared />
       </AssetSelectContextMenu>
-      <AssetSelectContextMenu icon={DotsVertical} title="Menu">
+      <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
         {#if isAllUserOwned}
           <FavoriteAction menuItem removeFavorite={isAllFavorite} />
         {/if}
@@ -333,33 +336,33 @@
     </AssetSelectControlBar>
   {:else}
     {#if viewMode === ViewMode.VIEW || viewMode === ViewMode.ALBUM_OPTIONS}
-      <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(backUrl)}>
+      <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close-button-click={() => goto(backUrl)}>
         <svelte:fragment slot="trailing">
           <CircleIconButton
             title="Add Photos"
             on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
-            logo={FileImagePlusOutline}
+            icon={mdiFileImagePlusOutline}
           />
 
           {#if isOwned}
             <CircleIconButton
               title="Share"
               on:click={() => (viewMode = ViewMode.SELECT_USERS)}
-              logo={ShareVariantOutline}
+              icon={mdiShareVariantOutline}
             />
             <CircleIconButton
               title="Delete album"
               on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
-              logo={DeleteOutline}
+              icon={mdiDeleteOutline}
             />
           {/if}
 
           {#if album.assetCount > 0}
-            <CircleIconButton title="Download" on:click={handleDownloadAlbum} logo={FolderDownloadOutline} />
+            <CircleIconButton title="Download" on:click={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
 
             {#if isOwned}
               <div use:clickOutside on:outclick={() => (viewMode = ViewMode.VIEW)}>
-                <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} logo={DotsVertical}>
+                <CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical}>
                   {#if viewMode === ViewMode.ALBUM_OPTIONS}
                     <ContextMenu {...contextMenuPosition}>
                       <MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
@@ -465,7 +468,7 @@
                   backgroundColor="#d3d3d3"
                   forceDark
                   size="20"
-                  logo={Link}
+                  icon={mdiLink}
                   on:click={() => (viewMode = ViewMode.LINK_SHARING)}
                 />
               {/if}
@@ -487,7 +490,7 @@
                   backgroundColor="#d3d3d3"
                   forceDark
                   size="20"
-                  logo={Plus}
+                  icon={mdiPlus}
                   on:click={() => (viewMode = ViewMode.SELECT_USERS)}
                   title="Add more users"
                 />
@@ -518,7 +521,9 @@
               on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
               class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
             >
-              <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
+              <span class="text-text-immich-primary dark:text-immich-dark-primary"
+                ><Icon path={mdiPlus} size="24" />
+              </span>
               <span class="text-lg">Select photos</span>
             </button>
           </div>