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?

  • 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 Apr 2 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. – user55791 Apr 2 at 8:02
2

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.

  • I understand. Thanks. – user55791 Apr 2 at 8:14

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.