Lightning : Icon color is not changing using the fill CSS

Question

According to the documentation (https://www.lightningdesignsystem.com/components/icons/ ) we can change the icon color by using 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 properties 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?

Answer 1

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

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 )

Updated for LWC components. (18/03/2021)

The above mentioned approach would not work for lightning web components such as lightning-icon as the web components use a shadow root property "closed" - which prevents us from modifying styles or accessing attributes from different namespaces.

Luckily Salesforce has introduced Styling Hooks for us to customize the icon styles.

Reference : https://developer.salesforce.com/docs/component-library/bundle/lightning-icon/documentation

<lightning-icon icon-name="utility:comments" alternative-text="comments" size="large" title="comments" class="comments-icn"></lightning-icon>

• Add a class attribute to the lightning-icon component.
• And add the following properties to your css class to customize icons.

.comments-icn{
   --sds-c-icon-color-foreground-default: orange; //utility icons
   --sds-c-icon-color-foreground: orange; //action icons or custom icons
   --sds-c-icon-color-background: white; //action icons or custom icons
}

Update (18/03/2024) - Styling hooks update

Thanks for bringing this up @Kelly Shoemake

Styling hooks have been updated from --sds to --slds. For more info on styling hooks https://www.lightningdesignsystem.com/components/icons/#Styling-Hooks-Overview

.comments-icn{
   --slds-c-icon-color-foreground-default: orange; //utility icons
   --slds-c-icon-color-foreground: orange; //action icons or custom icons
   --slds-c-icon-color-background: white; //action icons or custom icons
}

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

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"

variant="Error"

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.

Answer 3

lightning-icon can inherit color from the container it's in using slds-current-color. Top answer likely won't work for out of the box components as there is a shadow root intervention. This should work for those:

CSS:

.make-this-dang-icon-blue {
    color: blue;
}

HTML:

<div class="make-this-dang-icon-blue">
  <lightning-icon class="slds-current-color" icon-name="utility:favorite"></lightning-icon>
</div>

Answer 4

This should fix your issue (I did extensive research on this):

1. Add the variant attribute to the lightning icon as inverse: <lightning:icon class="icn" variant="inverse" iconName="utility:favorite" size="small" />

2. In the CSS file add the below code and put any color of your choice (I have put the color red for this example): .THIS .icn { --sds-c-icon-color-foreground: red; }

I have used styling hooks to modify inner elements of out-of-the-box components: Link - https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/

Answer 5

A small correction: CSS code should be as following.

.THIS.icn svg {
  fill : red;
}