0

Not able to change the icon Color using Css.

<lightning-icon icon-name="utility:arrowup" class="blueArrow" size="medium"></lightning-icon>

CSS file

.blueArrow {
    fill:blue;
    background-color: white;
}

Fill getting the default color.Can someone help?

1 Answer 1

4

Because lightning-icon is an LWC, all its internals are protected within its own Shadow DOM. You cannot use CSS to impact its content directly. All you can do is use the properties specifically exposed on the component, and the closest to colour setting is the variant property. See the documentation for details.

Fortunately, Salesforce added the ability to set CSS values through Styling Hooks. As per the cited documentation, you define your CSS like:

.blueArrow {
    --sds-c-icon-color-foreground-default: blue;
    --sds-c-icon-color-background: white;
}

or (for non-utility icons):

.blueArrow {
    --sds-c-icon-color-foreground: blue;
    --sds-c-icon-color-background: white;
}

You must log in to answer this question.

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