9

According to the documentation (https://www.lightningdesignsystem.com/components/icons/ ) we can change the icon color by suing the CSS. I am not able to do it. It always overrides with the Salesforce style.

<lightning:icon class="icn" iconName="utility:favorite" size="small" />

My Style class is as below:

 .THIS .icn{ fill: white; }

Other css property like background color are applying but fill is always getting overridden by salesforce default color ( grey). Anyone have any idea on how to fix this?

19

Actually the issue is which element you are applying the "fill" property to. Meaning when you declare something like <lightning:icon class="icn" iconName="utility:favorite" size="small" />.

It gets rendered as follows

HTML Render

If you notice the "icn" is applied to the outer span container rather than svg itself. Hence you will have to do Something as follows to apply your custom styles. ( applying the css to the svg element using heirarchies )

Svg Icon Colored

  • That Helped. It works now! – Vipin Nov 4 '16 at 15:33
2

By checking/copying the selector and scoping it down to the lightning-icon + my CSS class as follows you should be able to change the filling of the Icon easily.

.THIS lightning-icon.some-indicator > lightning-primitive-icon > svg > use{
    fill: green;
}

enter image description here

Also, note that the component itself accepts variants for "yellow, red and inverse (white).

<lightning:icon class="some-indicator" variant="warning" iconName="utility:up" size="small" alternativeText="metrics"/>

variant="Warning"

enter image description here

variant="Error"

enter image description here

Lightning:icon component

The variant changes the appearance of a utility icon. Accepted variants include inverse, warning and error. Use the inverse variant to implement a white fill in utility icons on dark backgrounds.

0

A small correction: CSS code should be as following.

.THIS.icn svg {
  fill : red;
}

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.