I'm using the lightning-button-icon inside the SLDS button.(Reason : to Change the button color).
button icon is in grey color variant="container" how to change the forward button color to white.
<button class="slds-button slds-button_neutral" style=" border: none;background-color: #04844B;color: white;">Next
<lightning-button-icon icon-name="utility:forward" variant="container" alternative-text="Settings" title="Settings"></lightning-button-icon>
</button>
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
Lightning design system do not supports apex input filed. Try to create custom CSS styles for lookups and other field types
Best Answer
You can also use the other simple way by embedding icon in the lightning-button
More information : https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example
In your case : Use
variant="bare-inverse"inlightning-button-icon