0

I have a lightning icon in my lightning component. It is an icon of type standard and I want to change its color:

Component

<div class="slds-media__figure">
    <lightning:icon iconName="standard:currency" class="cashAccountIcon" size="small"/>
</div>

Controller

.THIS.cashAccountIcon svg {
    fill : red;
}

However, the color is not changing in the above code. Is that a problem with my code or we cannot change backgrounds of standard icons?

Improve this question
2
  • You should be able to change the colors via CSS. I suggest trying .THIS .cashAccountIcon svg { with a space between .THIS and .cashAccountIcon to start
    – Brian Miller
    Commented Apr 2, 2019 at 7:54
  • 1
    That did the trick. I get very confused as to when there should be a space and when there shouldn't. Anyways, please put this in Answer so that I can mark it as correct.
    – Madhurima
    Commented Apr 2, 2019 at 8:02

1 Answer 1

Reset to default
4

The .THIS.myClass, with the period attaching THIS and myClass tries to look for the root element and whether it has myClass associated with it. Assuming your icon is not the root element in the component, try using .THIS .cashAccountIcon svg { with a space between .THIS and .cashAccountIcon

For what it's worth, if you use VS Code, you can hover over the .THIS ... line of code and see what kind of document structure it is trying to apply the CSS to.

Improve this answer
1
  • I understand. Thanks.
    – Madhurima
    Commented Apr 2, 2019 at 8:14

You must log in to answer this question.

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