From 4644ffe66585843724486ba93c9e00aa791e8b68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 13 Nov 2025 11:30:17 +0100
Subject: [PATCH 1/2] ability to enforce icon color

---
 packages/uui-icon/lib/uui-icon.element.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/uui-icon/lib/uui-icon.element.ts b/packages/uui-icon/lib/uui-icon.element.ts
index e0dd645cc..df404a1d2 100644
--- a/packages/uui-icon/lib/uui-icon.element.ts
+++ b/packages/uui-icon/lib/uui-icon.element.ts
@@ -8,7 +8,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
  * @element uui-icon
  * @fires {UUIIconRequestEvent} icon_request - fires when the name property is defined to retrieve the icon source.
  * @description - Icon component for displaying icons.
- * @cssprop --uui-icon-color - overwrite the icon color.
+ * @cssprop --uui-icon-color - sets the color for the icon, if not set it will use the text color.
+ * @cssprop --uui-icon-color-overwrite - overwrite the icon color, once this is set the --uui-icon-color will be ignored.
  * @see UUIIconRegistryElement Ideally used together with a icon registry.
  */
 @defineElement('uui-icon')
@@ -149,7 +150,10 @@ export class UUIIconElement extends LitElement {
 
       :host svg,
       ::slotted(svg) {
-        color: var(--uui-icon-color, currentColor);
+        color: var(
+          --uui-icon-color-overwrite,
+          var(--uui-icon-color, currentColor)
+        );
         width: 100%;
       }
 

From 8c7ab173534a4c37bbf236122c087af6768f364a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 13 Nov 2025 11:30:37 +0100
Subject: [PATCH 2/2] make menu item enforce icon color when selected

---
 packages/uui-menu-item/lib/uui-menu-item.element.ts |  3 +++
 packages/uui-menu-item/lib/uui-menu-item.story.ts   | 11 +++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index d7073993e..ef4fa71a9 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -546,6 +546,9 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         display: inline-flex;
         margin-right: var(--uui-size-2);
       }
+      :host([selected]:not([select-mode='highlight'], [disabled])) #icon {
+        --uui-icon-color-overwrite: currentColor;
+      }
 
       #badge {
         font-size: 12px;
diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts
index e4f81004f..fec8d13a2 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.story.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.story.ts
@@ -195,10 +195,21 @@ export const WidthBadge: Story = {
 
 export const WithIcon: Story = {
   args: {
+    selectable: true,
     'icon slot': html`<uui-icon slot="icon" name="favorite"></uui-icon>`,
   },
 };
 
+export const WithColoredIcon: Story = {
+  args: {
+    selectable: true,
+    'icon slot': html`<uui-icon
+      slot="icon"
+      name="favorite"
+      style="--uui-icon-color: red"></uui-icon>`,
+  },
+};
+
 export const ItemIndentation: Story = {
   render: () => html`
     ${MenuItems.map(