Change Icon Color in Lightning Web Component

Why fill css property not working for LWC Icon

Lightning Web Component provides hundreds of standard icon to choose from this list. And Lightning Web Components like lightning-icon or button-icon can be used to choose these icons.

If we want to change background color of these icons then only colors we have are green, yellow, red or gray as per their variant success, warning , error or inverse.

If you ever try to change color of these icons using fill property, you would be disappointed. Lightning Web Component used shadow DOM to encapsulate components from outer world, same principal here restricts us changing icon background color.

Try yourself [Not Working]

Continue reading “Change Icon Color in Lightning Web Component”