refactor: ui icon buttons (#15531)

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

@@ -30,7 +30,7 @@
     updatePerson,
     type PersonResponseDto,
   } from '@immich/sdk';
-  import { Button, Text } from '@immich/ui';
+  import { Button } from '@immich/ui';
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -392,10 +392,13 @@
             />
           </div>
         </div>
-        <Button onclick={() => (selectHidden = !selectHidden)} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiEyeOutline} />
-          <Text>{$t('show_and_hide_people')}</Text>
-        </Button>
+        <Button
+          leadingIcon={mdiEyeOutline}
+          onclick={() => (selectHidden = !selectHidden)}
+          size="small"
+          variant="ghost"
+          color="secondary">{$t('show_and_hide_people')}</Button
+        >
       </div>
     {/if}
   {/snippet}

web/src/routes/(user)/sharing/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import empty2Url from '$lib/assets/empty-2.svg';
   import Albums from '$lib/components/album-page/albums-list.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
@@ -15,7 +14,7 @@
     type AlbumViewSettings,
   } from '$lib/stores/preferences.store';
   import { createAlbumAndRedirect } from '$lib/utils/album-utils';
-  import { Button, HStack } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -40,14 +39,17 @@
 <UserPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <HStack gap={0}>
-      <Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiPlusBoxOutline} class="shrink-0" />
-        <span class="leading-none max-sm:text-xs">{$t('create_album')}</span>
+      <Button
+        leadingIcon={mdiPlusBoxOutline}
+        onclick={() => createAlbumAndRedirect()}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('create_album')}</Text>
       </Button>
-
-      <Button href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiLink} class="shrink-0" />
-        <span class="leading-none max-sm:text-xs">{$t('shared_links')}</span>
+      <Button leadingIcon={mdiLink} href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('shared_links')}</Text>
       </Button>
     </HStack>
   {/snippet}

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

@@ -2,7 +2,6 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@@ -169,18 +168,15 @@
 
   {#snippet buttons()}
     <HStack>
-      <Button onclick={handleCreate} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiPlus} />
-        <p class="hidden md:block">{$t('create_tag')}</p>
+      <Button leadingIcon={mdiPlus} onclick={handleCreate} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('create_tag')}</Text>
       </Button>
 
       {#if pathSegments.length > 0 && tag}
-        <Button onclick={handleEdit} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiPencil} size="18" />
+        <Button leadingIcon={mdiPencil} onclick={handleEdit} size="small" variant="ghost" color="secondary">
           <Text class="hidden md:block">{$t('edit_tag')}</Text>
         </Button>
-        <Button onclick={handleDelete} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiTrashCanOutline} />
+        <Button leadingIcon={mdiTrashCanOutline} onclick={handleDelete} size="small" variant="ghost" color="secondary">
           <Text class="hidden md:block">{$t('delete_tag')}</Text>
         </Button>
       {/if}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import empty3Url from '$lib/assets/empty-3.svg';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
@@ -21,7 +20,7 @@
   import { handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { emptyTrash, restoreTrash } from '@immich/sdk';
-  import { Button, HStack } from '@immich/ui';
+  import { Button, HStack, Text } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -115,24 +114,24 @@
     {#snippet buttons()}
       <HStack gap={0}>
         <Button
+          leadingIcon={mdiHistory}
           onclick={handleRestoreTrash}
           disabled={assetInteraction.selectionActive}
           variant="ghost"
           color="secondary"
           size="small"
         >
-          <Icon path={mdiHistory} />
-          {$t('restore_all')}
+          <Text class="hidden md:block">{$t('restore_all')}</Text>
         </Button>
         <Button
+          leadingIcon={mdiDeleteForeverOutline}
           onclick={() => handleEmptyTrash()}
           disabled={assetInteraction.selectionActive}
           variant="ghost"
           color="secondary"
           size="small"
         >
-          <Icon path={mdiDeleteForeverOutline} />
-          {$t('empty_trash')}
+          <Text class="hidden md:block">{$t('empty_trash')}</Text>
         </Button>
       </HStack>
     {/snippet}

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

@@ -1,6 +1,5 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
@@ -17,7 +16,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import type { AssetResponseDto } from '@immich/sdk';
   import { deleteAssets, updateAssets } from '@immich/sdk';
-  import { Button, HStack, IconButton } from '@immich/ui';
+  import { Button, HStack, IconButton, Text } from '@immich/ui';
   import { mdiCheckOutline, mdiInformationOutline, mdiKeyboard, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -164,18 +163,24 @@
   {#snippet buttons()}
     <HStack gap={0}>
       <Button
+        leadingIcon={mdiTrashCanOutline}
         onclick={() => handleDeduplicateAll()}
         disabled={!hasDuplicates}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiTrashCanOutline} />
-        {$t('deduplicate_all')}
+        <Text class="hidden md:block">{$t('deduplicate_all')}</Text>
       </Button>
-      <Button onclick={() => handleKeepAll()} disabled={!hasDuplicates} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiCheckOutline} />
-        {$t('keep_all')}
+      <Button
+        leadingIcon={mdiCheckOutline}
+        onclick={() => handleKeepAll()}
+        disabled={!hasDuplicates}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('keep_all')}</Text>
       </Button>
       <IconButton
         shape="round"