1

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;
}
2

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;
}
  • Thanks sfdcfox - I worked out your example. I did come across an alternative route that told me to load a custom .css into static resources and utilize the loadStyle from the platformResourceLoader module, which worked for me. Do you know if they plan on addressing this? If not, and this is done on purpose is there a section you can refer me to on the LWC guide that talks about this "isolation" more? – Jay May 31 at 20:04
  • @Jay It shouldn't work if the parent loads CSS, sounds like a bug. See Shadow DOM "CSS styles defined in a parent component don’t leak into a child. In our example, a p style defined in the todoApp.css style sheet doesn’t style the p element in the c-todo-item component, because the styles don’t reach into the shadow tree." Also see the related docs from there. – sfdcfox May 31 at 20:11
  • That is interesting @sfdcfox - I took the same css and loaded it as a static resource and then just added the following to my component and it is working. renderedCallback() { Promise.all([ loadStyle(this, css + '/'), ]) } – Jay May 31 at 20:18
  • @Jay Also, where did you find that? I'd like to take a look at it, and probably check with a few people to see if it is meant to be supported this way. It's my understanding that isolation should be preventing this from happening. – sfdcfox May 31 at 20:19
  • Refer to "pdebaty" response on this post, this is what gave me the idea to try- salesforce.stackexchange.com/questions/246887/… – Jay May 31 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.