0

Is there any way to stylize only the icon in a lightning-button?

<lightning-button variant="base" label="Base" icon-name="utility:add" icon-position="right"></lightning-button>

I only want to edit the styling on the add symbol and not the entire button.

Improve this question

1 Answer 1

Reset to default
2

You can use the Styling Hooks as below to change the size and color of the Icon.

.custom-css {
    --lwc-squareIconMediumContentAlt:2rem;
    --slds-c-icon-color-foreground:green; 
}

<lightning-button variant="base" label="Base" class="custom-css" icon-name="utility:add" icon-position="right"></lightning-button>
Improve this answer
2
  • Is there anywhere where I can find documentation about --slds-c-icon-color-foreground that doesnt look like standard attributes, and they are not mention in SLDS or in the LWC component library
    – manza
    Commented Jul 17, 2023 at 23:15
  • 1
    --slds-c-icon-color-foreground is a standard attribute mentioned in the official Lightning Design System documentation. Please check this link lightningdesignsystem.com/components/buttons.
    – Saroj Bera
    Commented Jul 18, 2023 at 7:39

You must log in to answer this question.

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