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?
Best Answer
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 )
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
For more info on Styling Hooks - https://www.lightningdesignsystem.com/components/icons/#Styling-Hooks-Overview