From dfb77ed72e35fc153caffd99f8a7c5683e543011 Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Mon, 15 Jan 2024 18:06:21 +0200
Subject: [PATCH 1/9] Button: "icon" named slot added as an alternative to the
 icon prop

---
 src/Button/Button.svelte | 42 ++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 400e68d06d..e182f29311 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -27,6 +27,8 @@
 
   /**
    * Specify the icon to render
+   * Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
+   *
    * @type {typeof import("svelte").SvelteComponent<any>}
    */
   export let icon = undefined;
@@ -85,7 +87,12 @@
   $: if (ctx && ref) {
     ctx.declareRef(ref);
   }
-  $: hasIconOnly = icon && !$$slots.default;
+  $: hasIconOnly = (icon || $$slots.icon) && !$$slots.default;
+  $: iconProps = {
+    "aria-hidden": "true",
+    class: "bx--btn__icon",
+    "aria-label": iconDescription,
+  };
   $: buttonProps = {
     type: href && !disabled ? undefined : type,
     tabindex,
@@ -158,12 +165,12 @@
     {#if hasIconOnly}
       <span class:bx--assistive-text="{true}">{iconDescription}</span>
     {/if}
-    <slot /><svelte:component
-      this="{icon}"
-      aria-hidden="true"
-      class="bx--btn__icon"
-      aria-label="{iconDescription}"
-    />
+    <slot />
+    {#if $$slots.icon}
+      <svelte:component this="{icon}" {...iconProps} />
+    {:else if icon}
+      <slot name="icon" {...iconProps} />
+    {/if}
   </a>
 {:else}
   <button
@@ -179,12 +186,19 @@
     {#if hasIconOnly}
       <span class:bx--assistive-text="{true}">{iconDescription}</span>
     {/if}
-    <slot /><svelte:component
-      this="{icon}"
-      aria-hidden="true"
-      class="bx--btn__icon"
-      style="{hasIconOnly ? 'margin-left: 0' : undefined}"
-      aria-label="{iconDescription}"
-    />
+    <slot />
+    {#if $$slots.icon}
+      <slot
+        name="icon"
+        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        {...iconProps}
+      />
+    {:else if icon}
+      <svelte:component
+        this="{icon}"
+        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        {...iconProps}
+      />
+    {/if}
   </button>
 {/if}

From 88b85a254e316b954798ddef40e7f87a189e1c0c Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Mon, 15 Jan 2024 18:07:56 +0200
Subject: [PATCH 2/9] HeaderGlobalAction now uses Button component instead of
 native button

---
 src/UIShell/HeaderGlobalAction.svelte | 29 ++++++++++++++++-----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index e4ba1742ff..9eb078e936 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @extends {"../Button/Button.svelte"} ButtonProps
+   */
+
   /** Set to `true` to use the active variant */
   export let isActive = false;
 
@@ -10,17 +14,18 @@
 
   /** Obtain a reference to the HTML button element */
   export let ref = null;
+
+  import Button from "../Button/Button.svelte";
+
+  $: buttonClass = [
+    "bx--header__action",
+    isActive && " bx--header__action--active",
+    $$restProps.class,
+  ]
+    .filter(Boolean)
+    .join(" ");
 </script>
 
-<button
-  type="button"
-  bind:this="{ref}"
-  class:bx--header__action="{true}"
-  class:bx--header__action--active="{isActive}"
-  {...$$restProps}
-  on:click
->
-  <slot>
-    <svelte:component this="{icon}" size="{20}" />
-  </slot>
-</button>
+<Button bind:this="{ref}" class="{buttonClass}" {...$$restProps} on:click>
+  <svelte:component this="{icon}" slot="icon" size="{20}" />
+</Button>

From 733ab2ccedcb4da95257d11d7bfd68de25044d9c Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Mon, 15 Jan 2024 18:12:21 +0200
Subject: [PATCH 3/9] HeaderGlobalActions: type definition, doc and test
 updated

---
 docs/src/pages/framed/UIShell/HeaderUtilities.svelte | 2 +-
 tests/HeaderUtilities.test.svelte                    | 2 +-
 types/UIShell/HeaderGlobalAction.svelte.d.ts         | 6 ++----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index 3b6d5029e1..800efac010 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -31,7 +31,7 @@
     <SkipToContent />
   </svelte:fragment>
   <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen="{isOpen1}"
       icon="{UserAvatarFilledAlt}"
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
index 755b2fc58a..54d239fbee 100644
--- a/tests/HeaderUtilities.test.svelte
+++ b/tests/HeaderUtilities.test.svelte
@@ -30,7 +30,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen
       on:open
diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts
index 97e0d0ff4b..52809b22d0 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -1,9 +1,7 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
+import type { ButtonProps } from "../Button/Button.svelte";
 
-type RestProps = SvelteHTMLElements["button"];
-
-export interface HeaderGlobalActionProps extends RestProps {
+export interface HeaderGlobalActionProps extends ButtonProps {
   /**
    * Set to `true` to use the active variant
    * @default false

From 01d1310408cc059b6db2493dde2be396635f7b10 Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Mon, 15 Jan 2024 18:23:03 +0200
Subject: [PATCH 4/9] Docs built

---
 COMPONENT_INDEX.md                           |  9 ++++----
 docs/src/COMPONENT_API.json                  | 23 +++++++++-----------
 types/Button/Button.svelte.d.ts              |  2 ++
 types/UIShell/HeaderGlobalAction.svelte.d.ts |  6 ++---
 4 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 3af93e1254..e2be0c96e5 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 | size             | No       | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code>                                                              | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
 | expressive       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
 | isSelected       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
-| icon             | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                 | <code>undefined</code> | Specify the icon to render                                                                                                                                                                    |
+| icon             | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                 | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`)                                                                     |
 | iconDescription  | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>undefined</code> | Specify the ARIA label for the button icon                                                                                                                                                    |
 | tooltipAlignment | No       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                         | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons                                                                                                 |
 | tooltipPosition  | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                           | <code>"bottom"</code>  | Set the position of the tooltip relative to the icon                                                                                                                                          |
@@ -395,6 +395,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 | Slot name | Default | Props                                                                                                                                           | Fallback |
 | :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
 | --        | Yes     | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | --       |
+| icon      | No      | --                                                                                                                                              | --       |
 
 ### Events
 
@@ -1666,15 +1667,13 @@ None.
 
 | Prop name | Required | Kind             | Reactive | Type                                                      | Default value          | Description                                   |
 | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                | <code>null</code>      | Obtain a reference to the HTML button element |
+| ref       | No       | <code>let</code> | Yes      | --                                                        | <code>null</code>      | Obtain a reference to the HTML button element |
 | isActive  | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>     | Set to `true` to use the active variant       |
 | icon      | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render                    |
 
 ### Slots
 
-| Slot name | Default | Props | Fallback                                                          |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| --        | Yes     | --    | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
+None.
 
 ### Events
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e7a5e2be59..8bf1eabf8a 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -500,7 +500,7 @@
         {
           "name": "icon",
           "kind": "let",
-          "description": "Specify the icon to render",
+          "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., `<Icon slot=\"icon\" size=\"{20}\" />`)",
           "type": "typeof import(\"svelte\").SvelteComponent<any>",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -633,7 +633,8 @@
           "name": "__default__",
           "default": true,
           "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
-        }
+        },
+        { "name": "icon", "default": false, "slot_props": "{}" }
       ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" },
@@ -5103,7 +5104,6 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the HTML button element",
-          "type": "null | HTMLButtonElement",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -5113,17 +5113,14 @@
         }
       ],
       "moduleExports": [],
-      "slots": [
-        {
-          "name": "__default__",
-          "default": true,
-          "fallback": "<svelte:component this=\"{icon}\" size=\"{20}\" />",
-          "slot_props": "{}"
-        }
-      ],
-      "events": [{ "type": "forwarded", "name": "click", "element": "button" }],
+      "slots": [],
+      "events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "button" }
+      "rest_props": { "type": "InlineComponent", "name": "Button" },
+      "extends": {
+        "interface": "ButtonProps",
+        "import": "\"../Button/Button.svelte\""
+      }
     },
     {
       "moduleName": "HeaderNav",
diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
index 29a4c8773f..56d2023fd3 100644
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@@ -41,6 +41,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
 
   /**
    * Specify the icon to render
+   * Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
    * @default undefined
    */
   icon?: typeof import("svelte").SvelteComponent<any>;
@@ -132,5 +133,6 @@ export default class Button extends SvelteComponentTyped<
         [key: string]: any;
       };
     };
+    icon: {};
   }
 > {}
diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts
index 52809b22d0..e6f4eb66cf 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -18,13 +18,11 @@ export interface HeaderGlobalActionProps extends ButtonProps {
    * Obtain a reference to the HTML button element
    * @default null
    */
-  ref?: null | HTMLButtonElement;
-
-  [key: `data-${string}`]: any;
+  ref?: undefined;
 }
 
 export default class HeaderGlobalAction extends SvelteComponentTyped<
   HeaderGlobalActionProps,
   { click: WindowEventMap["click"] },
-  { default: {} }
+  {}
 > {}

From de843335796fe60af38a6f66a2e5edba9f9beb90 Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Wed, 17 Jan 2024 11:30:59 +0200
Subject: [PATCH 5/9] Button ref binding and restProps spreading fixed

---
 src/UIShell/HeaderGlobalAction.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index 9eb078e936..06b16f7328 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -26,6 +26,6 @@
     .join(" ");
 </script>
 
-<Button bind:this="{ref}" class="{buttonClass}" {...$$restProps} on:click>
+<Button bind:ref {...$$restProps} class="{buttonClass}" on:click>
   <svelte:component this="{icon}" slot="icon" size="{20}" />
 </Button>

From e0696c1127daf5bca2dd90b6110d83505baac938 Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Wed, 17 Jan 2024 11:31:25 +0200
Subject: [PATCH 6/9] Revert "HeaderGlobalActions: type definition, doc and
 test updated"

This reverts commit 733ab2ccedcb4da95257d11d7bfd68de25044d9c.
---
 docs/src/pages/framed/UIShell/HeaderUtilities.svelte | 2 +-
 tests/HeaderUtilities.test.svelte                    | 2 +-
 types/UIShell/HeaderGlobalAction.svelte.d.ts         | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index 800efac010..3b6d5029e1 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -31,7 +31,7 @@
     <SkipToContent />
   </svelte:fragment>
   <HeaderUtilities>
-    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen="{isOpen1}"
       icon="{UserAvatarFilledAlt}"
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
index 54d239fbee..755b2fc58a 100644
--- a/tests/HeaderUtilities.test.svelte
+++ b/tests/HeaderUtilities.test.svelte
@@ -30,7 +30,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen
       on:open
diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts
index e6f4eb66cf..4dfaa83696 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -1,7 +1,9 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { ButtonProps } from "../Button/Button.svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface HeaderGlobalActionProps extends ButtonProps {
+type RestProps = SvelteHTMLElements["button"];
+
+export interface HeaderGlobalActionProps extends RestProps {
   /**
    * Set to `true` to use the active variant
    * @default false

From c5c88d466c686f6961f63bcde8495a6e05e1fa1e Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Wed, 17 Jan 2024 11:43:37 +0200
Subject: [PATCH 7/9] HeaderGlobalAction ref type specified explicitly in
 JSDoc, docs rebuilt

---
 COMPONENT_INDEX.md                           | 2 +-
 docs/src/COMPONENT_API.json                  | 1 +
 src/UIShell/HeaderGlobalAction.svelte        | 4 +++-
 types/UIShell/HeaderGlobalAction.svelte.d.ts | 8 +++-----
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index e2be0c96e5..f987473d34 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1667,7 +1667,7 @@ None.
 
 | Prop name | Required | Kind             | Reactive | Type                                                      | Default value          | Description                                   |
 | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref       | No       | <code>let</code> | Yes      | --                                                        | <code>null</code>      | Obtain a reference to the HTML button element |
+| ref       | No       | <code>let</code> | Yes      | <code>HTMLButtonElement</code>                            | <code>null</code>      | Obtain a reference to the HTML button element |
 | isActive  | No       | <code>let</code> | No       | <code>boolean</code>                                      | <code>false</code>     | Set to `true` to use the active variant       |
 | icon      | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render                    |
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 8bf1eabf8a..9052dee14d 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -5104,6 +5104,7 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the HTML button element",
+          "type": "HTMLButtonElement",
           "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index 06b16f7328..13e220ee07 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -12,7 +12,9 @@
    */
   export let icon = undefined;
 
-  /** Obtain a reference to the HTML button element */
+  /** Obtain a reference to the HTML button element
+   * @type {HTMLButtonElement}
+   */
   export let ref = null;
 
   import Button from "../Button/Button.svelte";
diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts
index 4dfaa83696..36923a55bb 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -1,9 +1,7 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
+import type { ButtonProps } from "../Button/Button.svelte";
 
-type RestProps = SvelteHTMLElements["button"];
-
-export interface HeaderGlobalActionProps extends RestProps {
+export interface HeaderGlobalActionProps extends ButtonProps {
   /**
    * Set to `true` to use the active variant
    * @default false
@@ -20,7 +18,7 @@ export interface HeaderGlobalActionProps extends RestProps {
    * Obtain a reference to the HTML button element
    * @default null
    */
-  ref?: undefined;
+  ref?: HTMLButtonElement;
 }
 
 export default class HeaderGlobalAction extends SvelteComponentTyped<

From e1cc19f9f0a9440b50d6230f15d2aea8e89419c6 Mon Sep 17 00:00:00 2001
From: militant_gnome <spburtsev@proton.me>
Date: Wed, 17 Jan 2024 11:47:27 +0200
Subject: [PATCH 8/9] HeaderUtilities files updated

---
 docs/src/pages/framed/UIShell/HeaderUtilities.svelte | 2 +-
 tests/HeaderUtilities.test.svelte                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
index 3b6d5029e1..800efac010 100644
--- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
+++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte
@@ -31,7 +31,7 @@
     <SkipToContent />
   </svelte:fragment>
   <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen="{isOpen1}"
       icon="{UserAvatarFilledAlt}"
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
index 755b2fc58a..54d239fbee 100644
--- a/tests/HeaderUtilities.test.svelte
+++ b/tests/HeaderUtilities.test.svelte
@@ -30,7 +30,7 @@
     <SkipToContent />
   </div>
   <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
+    <HeaderGlobalAction iconDescription="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
       bind:isOpen
       on:open

From 82f708d488abd9ba88011800dd99da6b87d227ba Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 24 Feb 2024 14:05:46 -0800
Subject: [PATCH 9/9] Also apply icon slot logic for link buttons

Without this, a button link with an icon prop would not be rendered.
---
 src/Button/Button.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index e182f29311..1a45236caa 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -167,9 +167,17 @@
     {/if}
     <slot />
     {#if $$slots.icon}
-      <svelte:component this="{icon}" {...iconProps} />
+      <slot
+        name="icon"
+        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        {...iconProps}
+      />
     {:else if icon}
-      <slot name="icon" {...iconProps} />
+      <svelte:component
+        this="{icon}"
+        style="{hasIconOnly ? 'margin-left: 0' : undefined}"
+        {...iconProps}
+      />
     {/if}
   </a>
 {:else}