use icons

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -146,7 +146,7 @@
     {/if}
     {#if isOwner}
       {#if !asset.isReadOnly && !asset.isExternal}
-        <CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
+        <CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
       {/if}
       <CircleIconButton
         isOpacity={true}

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -17,9 +17,8 @@
   import { asByteUnitString } from '../../utils/byte-units';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import Pencil from 'svelte-material-icons/Pencil.svelte';
   import PersonSidePanel, { PersonToCreate } from '../faces-page/person-side-panel.svelte';
-  import { mdiCalendar, mdiCameraIris, mdiClose, mdiImageOutline, mdiMapMarkerOutline } from '@mdi/js';
+  import { mdiCalendar, mdiCameraIris, mdiClose, mdiImageOutline, mdiMapMarkerOutline, mdiPencil } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
 
   export let asset: AssetResponseDto;
@@ -120,7 +119,7 @@
         class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
         on:click={() => dispatch('close')}
       >
-      <Icon path={mdiClose} size="24" />
+        <Icon path={mdiClose} size="24" />
       </button>
 
       <p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
@@ -159,7 +158,7 @@
         <div class="grid grid-cols-2 items-center">
           <h2 class="justify-self-start uppercase">People</h2>
           <button class="justify-self-end" on:click={() => (showEditFaces = true)}>
-            <Pencil size={18} />
+            <Icon path={mdiPencil} size={18} />
           </button>
           {#if unassignedFaces.length > 0}
             <p>{`${unassignedFaces.length} face${unassignedFaces.length > 1 ? 's' : ''} available to add`}</p>
@@ -224,7 +223,7 @@
         })}
         <div class="flex gap-4 py-4">
           <div>
-            <Calendar size="24" />
+            <Icon path={mdiCalendar} size="24" />
           </div>
 
           <div>
@@ -256,7 +255,7 @@
 
       {#if asset.exifInfo?.fileSizeInByte}
         <div class="flex gap-4 py-4">
-          <div><ImageOutline size="24" /></div>
+          <div><Icon path={mdiImageOutline} size="24" /></div>
 
           <div>
             <p class="break-all">
@@ -280,7 +279,7 @@
 
       {#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.fNumber}
         <div class="flex gap-4 py-4">
-          <div><CameraIris size="24" /></div>
+          <div><Icon path={mdiCameraIris} size="24" /></div>
 
           <div>
             <p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
@@ -309,24 +308,24 @@
 
       {#if asset.exifInfo?.city}
         <div class="flex gap-4 py-4">
-          <div><MapMarkerOutline size="24" /></div>
+          <div><Icon path={mdiMapMarkerOutline} size="24" /></div>
-        <div>
           <div>
-            <p>{asset.exifInfo.city}</p>
+            <div>
-            {#if asset.exifInfo?.state}
+              <p>{asset.exifInfo.city}</p>
-              <div class="flex gap-2 text-sm">
+              {#if asset.exifInfo?.state}
-                <p>{asset.exifInfo.state}</p>
+                <div class="flex gap-2 text-sm">
-              </div>
+                  <p>{asset.exifInfo.state}</p>
-            {/if}
+                </div>
-            {#if asset.exifInfo?.country}
+              {/if}
-              <div class="flex gap-2 text-sm">
+              {#if asset.exifInfo?.country}
-                <p>{asset.exifInfo.country}</p>
+                <div class="flex gap-2 text-sm">
-              </div>
+                  <p>{asset.exifInfo.country}</p>
-            {/if}
+                </div>
+              {/if}
+            </div>
           </div>
         </div>
       {/if}
-
     </div>
   </section>
 

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -366,7 +366,6 @@
 
 {#if viewMode === ViewMode.UNASSIGN_ASSETS}
   <UnmergeFaceSelector
-    {people}
     assetIds={Array.from($selectedAssets).map((a) => a.id)}
     personId={data.person.id}
     on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}