[SalesForce] LWC – CSS color fill for lightning:icon not working

I'm trying to color the utility "up" and "down" arrows that SLDS provides. I've confirmed that my CSS selector is correctly selecting the SVG icon in my browser console $$('.down svg'), but the fill is not applying to the svg.

Any thoughts? Is there something special I need to do?

Thanks

#LWC component
<lightning-icon class="down" icon-name="utility:down" size="x-small"></lightning-icon>

#CSS
.up svg {
    fill : green;

}

.down svg {
    fill : red;
}

Best Answer

You can't affect the inner parts of a component because of CSS isolation. You can alter the background, border, etc of the lightning-icon, but you can't affect the arrow within aside from any supported variants. See this example:

<template>
    <div class="row">
        <h1>Up Arrow</h1>
        <lightning-icon class="green-background" icon-name="utility:up" alternative-text="Up arrow" variant="inverse" size="small"></lightning-icon>
    </div>
    <div class="row">
        <h1>Down Arrow</h1>
        <lightning-icon class="red-background" icon-name="utility:down" alternative-text="Down arrow" variant="inverse" size="small"></lightning-icon>
    </div>
</template>

.row{
    margin:10px 0 10px;
}
.green-background {
    background: green;
}
.red-background {
    background: red;
}
Related Topic