feat(web): update icons (#19831)

* fix: update password icon in user settings

* feat: add icons to more modals

web/src/lib/components/asset-viewer/actions/set-visibility-action.svelte

@@ -25,6 +25,7 @@
       prompt: isLocked ? $t('remove_from_locked_folder_confirmation') : $t('move_to_locked_folder_confirmation'),
       confirmText: $t('move'),
       confirmColor: isLocked ? 'danger' : 'primary',
+      icon: isLocked ? mdiLockOpenVariantOutline : mdiLockOutline,
     });
 
     if (!isConfirmed) {

web/src/lib/components/photos-page/actions/set-visibility-action.svelte

@@ -26,6 +26,7 @@
       prompt: unlock ? $t('remove_from_locked_folder_confirmation') : $t('move_to_locked_folder_confirmation'),
       confirmText: $t('move'),
       confirmColor: unlock ? 'danger' : 'primary',
+      icon: unlock ? mdiLockOpenVariantOutline : mdiLockOutline,
     });
 
     if (!isConfirmed) {

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -3,6 +3,7 @@
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { Checkbox, Label } from '@immich/ui';
+  import { mdiDeleteForeverOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -26,6 +27,7 @@
 <ConfirmModal
   title={$t('permanently_delete_assets_count', { values: { count: size } })}
   confirmText={$t('delete')}
+  icon={mdiDeleteForeverOutline}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
   {#snippet promptSnippet()}

web/src/lib/components/shared-components/change-date.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+  import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import DateInput from '../elements/date-input.svelte';
@@ -178,6 +179,7 @@
 <ConfirmModal
   confirmColor="primary"
   {title}
+  icon={mdiCalendarEditOutline}
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}

web/src/lib/components/shared-components/change-location.svelte

@@ -11,6 +11,7 @@
   import { delay } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
+  import { mdiMapMarkerMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';
   interface Point {
@@ -113,6 +114,7 @@
 <ConfirmModal
   confirmColor="primary"
   title={$t('change_location')}
+  icon={mdiMapMarkerMultipleOutline}
   size="medium"
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >

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

@@ -22,7 +22,7 @@
     mdiFeatureSearchOutline,
     mdiKeyOutline,
     mdiLockSmart,
-    mdiOnepassword,
+    mdiFormTextboxPassword,
     mdiServerOutline,
     mdiTwoFactorAuthentication,
   } from '@mdi/js';
@@ -124,7 +124,12 @@
     </SettingAccordion>
   {/if}
 
-  <SettingAccordion icon={mdiOnepassword} key="password" title={$t('password')} subtitle={$t('change_your_password')}>
+  <SettingAccordion
+    icon={mdiFormTextboxPassword}
+    key="password"
+    title={$t('password')}
+    subtitle={$t('change_your_password')}
+  >
     <ChangePasswordSettings />
   </SettingAccordion>
 

web/src/lib/modals/AssetUpdateDecriptionConfirmModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { Input } from '@immich/ui';
+  import { mdiText } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -15,6 +16,7 @@
 <ConfirmModal
   confirmColor="primary"
   title={$t('edit_description')}
+  icon={mdiText}
   prompt={$t('edit_description_prompt')}
   onClose={(confirmed) => (confirmed ? onClose(description) : onClose())}
 >

web/src/lib/modals/ConfirmModal.svelte

@@ -10,6 +10,7 @@
     confirmColor?: Color;
     disabled?: boolean;
     size?: 'small' | 'medium';
+    icon?: string;
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
   }
@@ -21,6 +22,7 @@
     confirmColor = 'danger',
     disabled = false,
     size = 'small',
+    icon = undefined,
     onClose,
     promptSnippet,
   }: Props = $props();
@@ -30,7 +32,7 @@
   };
 </script>
 
-<Modal {title} onClose={() => onClose(false)} {size}>
+<Modal {title} {icon} onClose={() => onClose(false)} {size}>
   <ModalBody>
     {#if promptSnippet}{@render promptSnippet()}{:else}
       <p>{prompt}</p>