feat(ui-shell): allow custom hamburger menu icons

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 @@
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
-    <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
+    <HamburgerMenu
+      bind:isOpen="{isSideNavOpen}"
+      iconClose="{iconClose}"
+      iconMenu="{iconMenu}"
+    />
   {/if}
   <a
     href="{href}"

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -8,6 +8,20 @@
   /** Set to `true` to toggle the open state */
   export let isOpen = false;
 
+  /**
+   * 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;
+
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
@@ -27,5 +41,5 @@
   on:click
   on:click="{() => (isOpen = !isOpen)}"
 >
-  <svelte:component this="{isOpen ? Close20 : Menu20}" />
+  <svelte:component this="{isOpen ? iconClose : iconMenu}" />
 </button>