feat(tag): support custom icon variant

COMPONENT_INDEX.md

@@ -3593,6 +3593,7 @@ None.
 | disabled  | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to disable a filterable tag              |
 | skeleton  | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to display the skeleton state            |
 | title     | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"Clear filter"</code>                      | Set the title for the close button in a filterable tag |
+| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                                                                            | --                                               | Specify the icon from `carbon-icons-svelte` to render  |
 | id        | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag                       |
 
 ### Slots

docs/src/COMPONENT_API.json

@@ -7720,6 +7720,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",

docs/src/pages/components/Tag.svx

@@ -1,5 +1,7 @@
 <script>
   import { Tag } from "carbon-components-svelte";
+  import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
+  import Document16 from "carbon-icons-svelte/lib/Document16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -25,6 +27,13 @@
 
 <Tag filter on:click>Filterable</Tag>
 
+### Custom icon
+
+Note: rendering a custom icon cannnot be used with the filterable variant.
+
+<Tag icon={IbmCloud16}>IBM Cloud</Tag>
+<Tag icon={Document16} type="blue">API documentation</Tag>
+
 ### Skeleton
 
 <Tag skeleton />

src/Tag/Tag.svelte

@@ -19,6 +19,12 @@
   /** Set the title for the close button in a filterable tag */
   export let title = "Clear filter";
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let icon = undefined;
+
   /** Set an id for the filterable tag */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -53,6 +59,7 @@
       class:bx--tag--cool-gray="{type === 'cool-gray'}"
       class:bx--tag--warm-gray="{type === 'warm-gray'}"
       class:bx--tag--high-contrast="{type === 'high-contrast'}"
+      {...$$restProps}
     >
       <slot props="{{ class: 'bx--tag__label' }}">
         <span class:bx--tag__label="{true}">{type}</span>
@@ -71,7 +78,8 @@
       </button>
     </div>
   {:else}
-    <span
+    <div
+      id="{id}"
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--red="{type === 'red'}"
@@ -85,12 +93,20 @@
       class:bx--tag--cool-gray="{type === 'cool-gray'}"
       class:bx--tag--warm-gray="{type === 'warm-gray'}"
       class:bx--tag--high-contrast="{type === 'high-contrast'}"
+      {...$$restProps}
       on:click
       on:mouseover
       on:mouseenter
       on:mouseleave
     >
-      <slot />
+      {#if icon}
-    </span>
+        <div class:bx--tag__custom-icon="{true}">
+          <svelte:component this="{icon}" />
+        </div>
+      {/if}
+      <span>
+        <slot />
+      </span>
+    </div>
   {/if}
 {/if}

tests/Tag.test.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Tag } from "../types";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
 </script>
 
 <Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
@@ -28,4 +29,6 @@
 
 <Tag filter on:click>Filterable</Tag>
 
+<Tag icon="{Add16}">Custom icon</Tag>
+
 <Tag skeleton />

types/Tag/Tag.d.ts

@@ -43,6 +43,11 @@ export interface TagProps
    */
   title?: string;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
   /**
    * Set an id for the filterable tag
    * @default "ccs-" + Math.random().toString(36)