From d6d31c6695d9fd08c230c9486514bcc6d37eda16 Mon Sep 17 00:00:00 2001
From: Nicholas <30300649+NicholasFlamy@users.noreply.github.com>
Date: Sun, 10 Aug 2025 22:23:21 -0400
Subject: [PATCH] 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     | 4 ++--
 web/src/lib/components/album-page/albums-list.svelte      | 4 ++--
 .../asset-viewer/actions/download-action.svelte           | 6 +++---
 .../components/photos-page/actions/download-action.svelte | 8 +++-----
 .../components/share-page/individual-shared-viewer.svelte | 4 ++--
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte         | 4 ++--
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 0866d38557..8c91d29a34 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/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}
diff --git a/web/src/lib/components/album-page/albums-list.svelte b/web/src/lib/components/album-page/albums-list.svelte
index 668f624af5..a2ac1231ed 100644
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/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}
diff --git a/web/src/lib/components/asset-viewer/actions/download-action.svelte b/web/src/lib/components/asset-viewer/actions/download-action.svelte
index 677550e2da..f790569703 100644
--- a/web/src/lib/components/asset-viewer/actions/download-action.svelte
+++ b/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}
diff --git a/web/src/lib/components/photos-page/actions/download-action.svelte b/web/src/lib/components/photos-page/actions/download-action.svelte
index 0a1376374c..6f2a7771e9 100644
--- a/web/src/lib/components/photos-page/actions/download-action.svelte
+++ b/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}
diff --git a/web/src/lib/components/share-page/individual-shared-viewer.svelte b/web/src/lib/components/share-page/individual-shared-viewer.svelte
index 1c4bf1e4b6..c677922379 100644
--- a/web/src/lib/components/share-page/individual-shared-viewer.svelte
+++ b/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}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 0d430d918f..4370d0ec7c 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}