fix: change all download icons to mdiDownload for clarity and consistency (#20821)

change all download icons to `mdiDownload` for clarity and consistency

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

@@ -14,7 +14,7 @@
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
-  import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
+  import { mdiDownload, mdiFileImagePlusOutline } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
@@ -125,7 +125,7 @@
             variant="ghost"
             aria-label={$t('download')}
             onclick={() => downloadAlbum(album)}
-            icon={mdiFolderDownloadOutline}
+            icon={mdiDownload}
           />
         {/if}
         {#if sharedLink.showMetadata && $featureFlags.loaded && $featureFlags.map}

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

@@ -38,7 +38,7 @@
   import { normalizeSearchString } from '$lib/utils/string-utils';
   import { addUsersToAlbum, deleteAlbum, isHttpError, type AlbumResponseDto, type AlbumUserAddDto } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
-  import { mdiDeleteOutline, mdiFolderDownloadOutline, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
+  import { mdiDeleteOutline, mdiDownload, mdiRenameOutline, mdiShareVariantOutline } from '@mdi/js';
   import { groupBy } from 'lodash-es';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -419,7 +419,7 @@
     />
     <MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => openShareModal()} />
   {/if}
-  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={() => handleDownloadAlbum()} />
+  <MenuOption icon={mdiDownload} text={$t('download')} onClick={() => handleDownloadAlbum()} />
   {#if showFullContextMenu}
     <MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
   {/if}

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

@@ -6,7 +6,7 @@
   import { downloadFile } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
-  import { mdiFolderDownloadOutline } from '@mdi/js';
+  import { mdiDownload } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -26,10 +26,10 @@
     color="secondary"
     shape="round"
     variant="ghost"
-    icon={mdiFolderDownloadOutline}
+    icon={mdiDownload}
     aria-label={$t('download')}
     onclick={onDownloadFile}
   />
 {:else}
-  <MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={onDownloadFile} />
+  <MenuOption icon={mdiDownload} text={$t('download')} onClick={onDownloadFile} />
 {/if}

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

@@ -5,7 +5,7 @@
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
   import { getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
-  import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
+  import { mdiDownload } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
@@ -31,21 +31,19 @@
     clearSelect();
     await downloadArchive(filename, { assetIds: assets.map((asset) => asset.id) });
   };
-
-  let menuItemIcon = $derived(getAssets().length === 1 ? mdiFileDownloadOutline : mdiFolderDownloadOutline);
 </script>
 
 <svelte:document use:shortcut={{ shortcut: { key: 'd', shift: true }, onShortcut: handleDownloadFiles }} />
 
 {#if menuItem}
-  <MenuOption text={$t('download')} icon={menuItemIcon} onClick={handleDownloadFiles} />
+  <MenuOption text={$t('download')} icon={mdiDownload} onClick={handleDownloadFiles} />
 {:else}
   <IconButton
     shape="round"
     color="secondary"
     variant="ghost"
     aria-label={$t('download')}
-    icon={mdiCloudDownloadOutline}
+    icon={mdiDownload}
     onclick={handleDownloadFiles}
   />
 {/if}

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -14,7 +14,7 @@
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { addSharedLinkAssets, getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
-  import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
+  import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
@@ -135,7 +135,7 @@
               variant="ghost"
               aria-label={$t('download')}
               onclick={downloadAssets}
-              icon={mdiFolderDownloadOutline}
+              icon={mdiDownload}
             />
           {/if}
         {/snippet}

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -75,7 +75,7 @@
     mdiCogOutline,
     mdiDeleteOutline,
     mdiDotsVertical,
-    mdiFolderDownloadOutline,
+    mdiDownload,
     mdiImageOutline,
     mdiImagePlusOutline,
     mdiLink,
@@ -664,7 +664,7 @@
                 color="secondary"
                 aria-label={$t('download')}
                 onclick={handleDownloadAlbum}
-                icon={mdiFolderDownloadOutline}
+                icon={mdiDownload}
               />
             {/if}