Override the style (color)of Lightning-button-icon on bare variant in LWC

csshtmllightning-web-components

Good evening,
As the title say i'm trying to override the the icon style (color) of Lightning-button-icon on bare variant in LWC, as per the documentation of salesforce there is no guidelines on the Lightning Design System for this situation.
i tried multiple button css style overrides to achieve and no success.

Take in consideration that i could do it with a aura wrapper,but with the shadow DOM of LWC i need to implement the slds and couldn't achieve it.

Code example below:

HTML:

<lightning-button-icon icon-name="utility:settings" class='icon_b' variant="bare" alternative-text="Settings" title="Settings"></lightning-button-icon>

CSS

.icon_b{--slds-c-button-brand-color:yellow;}

Best Answer

If you want to change the background

CSS

.icon-b {
    --slds-c-button-color-background: yellow;
}

If you want to change the icon itself:

CSS

.icon-b {
    --slds-c-icon-color-foreground: yellow;
}

Hope this helps!