diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f0012a7b..263c27ba 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3593,6 +3593,7 @@ None.
| disabled | let
| No | boolean
| false
| Set to `true` to disable a filterable tag |
| skeleton | let
| No | boolean
| false
| Set to `true` to display the skeleton state |
| title | let
| No | string
| "Clear filter"
| Set the title for the close button in a filterable tag |
+| icon | let
| No | typeof import("carbon-icons-svelte").CarbonIcon
| -- | Specify the icon from `carbon-icons-svelte` to render |
| id | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the filterable tag |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 6564f1f6..787022ad 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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",
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 0b197a1d..42b18770 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -1,5 +1,7 @@
@@ -25,6 +27,13 @@
Filterable
+### Custom icon
+
+Note: rendering a custom icon cannnot be used with the filterable variant.
+
+IBM Cloud
+API documentation
+
### Skeleton
\ No newline at end of file
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 3ead6e74..d5bcb159 100644
--- a/src/Tag/Tag.svelte
+++ b/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}
>
{type}
@@ -71,7 +78,8 @@
{:else}
-
-
-
+ {#if icon}
+
+
+
+ {/if}
+
+
+
+
{/if}
{/if}
diff --git a/tests/Tag.test.svelte b/tests/Tag.test.svelte
index db53c202..7e5cc57e 100644
--- a/tests/Tag.test.svelte
+++ b/tests/Tag.test.svelte
@@ -1,5 +1,6 @@
IBM Cloud
@@ -28,4 +29,6 @@
Filterable
+Custom icon
+
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index ee4e105a..20d122dc 100644
--- a/types/Tag/Tag.d.ts
+++ b/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)