chore: migrate to UI lib icon (#22096)

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

@@ -1,11 +1,11 @@
 <script lang="ts">
   import AlbumCard from '$lib/components/album-page/album-card.svelte';
   import { AppRoute } from '$lib/constants';
-  import Icon from '$lib/elements/Icon.svelte';
   import { albumViewSettings } from '$lib/stores/preferences.store';
   import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import type { AlbumResponseDto } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { flip } from 'svelte/animate';
@@ -51,7 +51,7 @@
       class="w-full text-start mt-2 pt-2 pe-2 pb-2 rounded-md transition-colors cursor-pointer dark:text-immich-dark-fg hover:text-immich-primary dark:hover:text-immich-dark-primary hover:bg-subtle dark:hover:bg-immich-dark-gray"
       aria-expanded={!isCollapsed}
     >
-      <Icon path={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" />
+      <Icon icon={mdiChevronRight} size="24" class="inline-block -mt-2.5 transition-all duration-250 {iconRotation}" />
       <span class="font-bold text-3xl text-black dark:text-white">{group.name}</span>
       <span class="ms-1.5">({$t('albums_count', { values: { count: albums.length } })})</span>
     </button>

web/src/lib/components/album-page/albums-table-row.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { AppRoute, dateFormats } from '$lib/constants';
-  import Icon from '$lib/elements/Icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import type { AlbumResponseDto } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -39,7 +39,7 @@
     {album.albumName}
     {#if album.shared}
       <Icon
-        path={mdiShareVariantOutline}
+        icon={mdiShareVariantOutline}
         size="16"
         class="inline ms-1 opacity-70"
         title={album.ownerId === $user.id

web/src/lib/components/album-page/albums-table.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import AlbumTableHeader from '$lib/components/album-page/albums-table-header.svelte';
   import AlbumTableRow from '$lib/components/album-page/albums-table-row.svelte';
-  import Icon from '$lib/elements/Icon.svelte';
   import { AlbumGroupBy, albumViewSettings } from '$lib/stores/preferences.store';
   import {
     isAlbumGroupCollapsed,
@@ -11,6 +10,7 @@
   } from '$lib/utils/album-utils';
   import type { ContextMenuPosition } from '$lib/utils/context-menu';
   import type { AlbumResponseDto } from '@immich/sdk';
+  import { Icon } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
@@ -54,7 +54,7 @@
         >
           <td class="text-md text-start -mb-1">
             <Icon
-              path={mdiChevronRight}
+              icon={mdiChevronRight}
               size="20"
               class="inline-block -mt-2 transition-all duration-250 {iconRotation}"
             />