3

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;
}
Improve this question

3 Answers 3

Reset to default
5

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;
}
Improve this answer
11
  • 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, 2019 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, 2019 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, 2019 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, 2019 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, 2019 at 20:24
2
  1. Add a class to the lightning icon
<lightning-icon icon-name="utility:down" class="svgWhite"></lightning-icon>
  1. Add the css and change the styling hook variable In this case the icon was using this to display the colour

enter image description here

.svgWhite {
    --sds-c-icon-color-foreground-default: white;
}
  1. Done,

More on styling hooks here: https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/

Improve this answer
1

To change the color of your utility icon, if found the following to work.

CSS

 .menu-icon {
    --lwc-colorTextIconDefault: white;
  }

HTML

<lightning-icon
        icon-name="utility:connected_apps"
        alternative-text="Connected"
        title="Connected"
        class="menu-icon"
      >
      </lightning-icon>
Improve this answer

You must log in to answer this question.

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