change color of a lightning-vertical-navigation-item-icon

Question

I am building an lwc menu and have a

<lightning-vertical-navigation-item-icon
  label="Sessions"
  name="sessions"
  icon-name="utility:event"
  class="myIcon"
>
</lightning-vertical-navigation-item-icon>

But cant seem to change the color I think I tried everything with my CSS to override the default color but doesn't work

.slds-icon,
.slds-icon-text-default,
.slds-icon_x-small,
.my-icon,
lightning-primitive-icon,
.slds-nav-vertical__action {
  fill: #fff !important;
  color: #fff !important;
  background-color: #fff !important;
}

Answer 1

You could achieve this with styling hooks. In the chrome console you can see that for filling color is used this variable --sds-c-icon-color-foreground-default.

You can override this variable with any color you want, as follows.

yourComponent.css

:host {
    --sds-c-icon-color-foreground-default: green;
}

Answer 2

The issue seems to be two-fold,

Your css is targeting

Classes:

 - my-icon
 - slds-nav-vertical__action

HTML Tags:
 - lightning-primitive-icon

Whereas your HTML is slightly mismatching the CSS provided

Classes:
 - myIcon

HTML Tag:
 - lightning-vertical-navigation-item-icon

If you rename your CSS target to look for .myIcon rather than .my-icon you should get success

Alternative Approach: Rather than use CSS color and background-color. Use filter for the SVG.

White would be filter: invert(96%) sepia(0%) saturate(0%) hue-rotate(121deg) brightness(104%) contrast(105%); You can use codepen.io/sosuke/pen/Pjoqqp to convert HEX to Filter