From 20180c3180f25bc788ed6a5f11150ced74e7c9f9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 13 Nov 2025 12:16:59 +0100
Subject: [PATCH] Collection Item Picker: support icon colors (#20787)

Update icon usage in collection menu and example data

Replaces <uui-icon> with <umb-icon> in the default collection menu item element to support colors. Also updates example picker data source items to showcase color support.
---
 .../example-custom-picker-collection-data-source.ts    | 10 +++++-----
 .../default/default-collection-menu-item.element.ts    |  4 +---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts b/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts
index 34328f20b7..e0b5b84d7a 100644
--- a/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts
+++ b/src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts
@@ -53,35 +53,35 @@ const customItems: Array<ExampleCollectionItemModel> = [
 		unique: '1',
 		entityType: 'example',
 		name: 'Example 1',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 	{
 		unique: '2',
 		entityType: 'example',
 		name: 'Example 2',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 	{
 		unique: '3',
 		entityType: 'example',
 		name: 'Example 3',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 	{
 		unique: '4',
 		entityType: 'example',
 		name: 'Example 4',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: false,
 	},
 	{
 		unique: '5',
 		entityType: 'example',
 		name: 'Example 5',
-		icon: 'icon-shape-triangle',
+		icon: 'icon-shape-triangle yellow',
 		isPickable: true,
 	},
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts
index 3dfed63ced..fc30554826 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/menu/menu-item/default/default-collection-menu-item.element.ts
@@ -61,9 +61,7 @@ export class UmbDefaultCollectionMenuItemElement extends UmbLitElement {
 				?selected=${this._isSelected}
 				@selected=${() => this.#api?.select()}
 				@deselected=${() => this.#api?.deselect()}>
-				${item.icon
-					? html`<uui-icon slot="icon" name=${item.icon}></uui-icon>`
-					: html`<uui-icon slot="icon" name=${getItemFallbackIcon()}></uui-icon>`}
+				<umb-icon slot="icon" name=${item.icon ?? getItemFallbackIcon()}></umb-icon>
 			</uui-menu-item>
 		`;
 	}