1

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

2 Answers 2

2

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.

enter image description here

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

yourComponent.css

:host {
    --sds-c-icon-color-foreground-default: green;
}
2
  • intresting. But i get this error when i vscode try to compile it "CssSyntaxError: LWC1009: postcss-plugin-lwc: 15:3: Invalid definition of custom property "--sds-c-icon-color-foreground-default"."
    – dovigz
    Jan 10 at 17:08
  • update pushing the code to the scratch org works there is a bug thats associated with styling hook not working in the dev server
    – dovigz
    Jan 10 at 17:24
0

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

4
  • Thanks for catching the typo; but changing the HTML element to lightning-vertical-navigation-item-icon just changes the background color not the icon itself
    – dovigz
    Jan 10 at 16:57
  • 1
    I definitely recommend using the SLDS Styling hooks! But I also know it's an SVG which is a pain to colour. Rather than use color or background-color. An option would be to use filter. For instance: 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 Jan 10 at 17:21
  • -mindblown. I probably would use this hack as styling hooks don't work on my dev server. If you edit your answer to include the filter I can accept it as an answer too
    – dovigz
    Jan 10 at 17:36
  • @dovigz Updated! It's definitely a circumstance based hacky approach but glad it works! Jan 10 at 17:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.