14

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?

5 Answers 5

30

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

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
}

For more info on Styling Hooks - https://www.lightningdesignsystem.com/components/icons/#Styling-Hooks-Overview

Styling Hooks

3
  • That Helped. It works now!
    – Vipin
    Nov 4, 2016 at 15:33
  • Somehow this didn't work for me. Instead, I had to style the svg use element.
    – Hans
    Dec 23, 2019 at 11:54
  • Could be a release related thing (some update to the DOM structure) or if there is a shadow root intervention for the out of box components - then this approach might cause discrepancies as this relies on the DOM heirarchy & CSS Specificity. Nevertheless please feel free to update your approach with an example for the future audience.
    – Sumuga
    Jan 20, 2020 at 13:22
6

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.

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>
1

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" />
  1. 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/

2
  • please include any research links based on your statement.
    – glls
    Mar 10, 2021 at 21:12
  • @glls: Added link to styling hooks Mar 11, 2021 at 10:13
0

A small correction: CSS code should be as following.

.THIS.icn svg {
  fill : red;
}
1
  • I am pretty sure it should be: .THIS .icn svg {} (space between .THIS and .icn)
    – manza
    Aug 16 at 1:58

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.