Menu item: enforce icon color when selected

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%;
       }
 

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;

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(