lightningsldssvg-icon
Not able to change the icon Color using Css.
<lightning-icon icon-name="utility:arrowup" class="blueArrow" size="medium"></lightning-icon>
CSS file
.blueArrow {
fill:blue;
background-color: white;
}
Fill getting the default color.Can someone help?
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>
.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
You need to wrap your component content like this -
<aura:component>
<div class="slds-box slds-theme_default">
//your component content
</div>
</aura:component>
then your component background would be default white. For more information - https://www.lightningdesignsystem.com/utilities/themes/
or if you want some other background color then you have to write some css
.THIS .slds-theme_backgroundColor-lightblue {
background-color: lightblue;
}
and add this class to your container div
<aura:component>
<div class="slds-box slds-theme_default slds-theme_backgroundColor-lightblue">
//your component content
</div>
</aura:component>
Best Answer
Because
lightning-iconis an LWC, all its internals are protected within its own Shadow DOM. You cannot use CSS to impact its content directly. All you can do is use the properties specifically exposed on the component, and the closest to colour setting is the variant property. See the documentation for details.Fortunately, Salesforce added the ability to set CSS values through Styling Hooks. As per the cited documentation, you define your CSS like:
or (for non-utility icons):