diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index fe6eb1c0..6a1bfd45 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1505,16 +1505,18 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
-| ref | let
| Yes | null | HTMLAnchorElement
| null
| Obtain a reference to the HTML anchor element |
-| isSideNavOpen | let
| Yes | boolean
| false
| Set to `true` to open the side nav |
-| expandedByDefault | let
| No | boolean
| true
| Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | let
| No | string
| -- | Specify the ARIA label for the header |
-| href | let
| No | string
| -- | Specify the `href` attribute |
-| company | let
| No | string
| -- | Specify the company name |
-| platformName | let
| No | string
| ""
| Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
-| persistentHamburgerMenu | let
| No | boolean
| false
| Set to `true` to persist the hamburger menu |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
+| ref | let
| Yes | null | HTMLAnchorElement
| null
| Obtain a reference to the HTML anchor element |
+| isSideNavOpen | let
| Yes | boolean
| false
| Set to `true` to open the side nav |
+| expandedByDefault | let
| No | boolean
| true
| Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | let
| No | string
| -- | Specify the ARIA label for the header |
+| href | let
| No | string
| -- | Specify the `href` attribute |
+| company | let
| No | string
| -- | Specify the company name |
+| platformName | let
| No | string
| ""
| Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
+| persistentHamburgerMenu | let
| No | boolean
| false
| Set to `true` to persist the hamburger menu |
+| iconMenu | let
| No | typeof import("carbon-icons-svelte").CarbonIcon
| -- | Specify the icon from `carbon-icons-svelte` to render for the closed state
Defaults to `Menu20` |
+| iconClose | let
| No | typeof import("carbon-icons-svelte").CarbonIcon
| -- | Specify the icon from `carbon-icons-svelte` to render for the opened state
Defaults to `Close20` |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index a8dbce39..cfbd284f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -3787,6 +3787,24 @@
"isFunction": false,
"constant": false,
"reactive": true
+ },
+ {
+ "name": "iconMenu",
+ "kind": "let",
+ "description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
+ "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+ "isFunction": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "iconClose",
+ "kind": "let",
+ "description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
+ "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+ "isFunction": false,
+ "constant": false,
+ "reactive": false
}
],
"slots": [
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index c106e746..ff74f9bd 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -35,6 +35,22 @@
/** Obtain a reference to the HTML anchor element */
export let ref = null;
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render for the closed state
+ * Defaults to `Menu20`
+ * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+ */
+ export let iconMenu = Menu20;
+
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render for the opened state
+ * Defaults to `Close20`
+ * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+ */
+ export let iconClose = Close20;
+
+ import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+ import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
import { shouldRenderHamburgerMenu } from "../navStore";
import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
@@ -52,7 +68,11 @@