[SalesForce] How to define dynamically background color in Lightning

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
}

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

Save a CSS file.

html{
background: white;
}

Upload CSS file in the Static resource with any name(let say ChangeBGColor)

Import the CSS in your parent lightning component using

< ltng:require styles="{!$Resource.ChangeBGColor}" />