make menu item enforce icon color when selected

Author: nielslyngsoe

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(