0

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;}
Improve this question
2
  • 1
    Can you be more specific? Do you want to override the styles? What is your aim and what is not working?
    – Mohith Shrivastava
    Commented Nov 10, 2023 at 19:02
  • Thank for your feedback @MohithShrivastava, i changed the question and added more context, i completely agree that i should have added it. But i just want a simple colour override , but after a lot of tries i didn't find an positive way of doing it.
    – joao couto
    Commented Nov 10, 2023 at 20:19

1 Answer 1

Reset to default
3

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!

Improve this answer
2
  • 1
    Well i tried some varities of this and worked , thanks a lot would like this situations to be on the documentation itself.
    – joao couto
    Commented Nov 13, 2023 at 11:57
  • yeah i would agree @joaocouto the docs are a bit lacking here. Glad you were able to get it working!
    – Scopes
    Commented Nov 14, 2023 at 16:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .