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]

This is what I tried that didn’t worked

<template>
    <lightning-icon class='redColor' icon-name="utility:connected_apps" alternative-text="Connected" variant="inverse" size="large"
            title="large size"></lightning-icon>
</template>

CSS File

.redColor{
    fill : #FF0000;
}

Solution – Custom Background Color for LWC Icons

Step 1 :

Right click on Icon where you want to change background color and click on inspect

View Source code of LWC Icon in Chrome

Step 2 :

Copy svg tag and paste in your editor and add css. DOnt forget to add div tag as parent to control icons size.

Copy SVG equivalent of LWC Icon in Chrome browser
<template>
    <div class="iconContainer redColor">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="connected_apps">
        <path d="M11 14.4l-1.8 8.1c-.1.5.5.8.8.4l9.7-12c.3-.3.1-.7-.3-.7h-5.2c-.4 0-.6-.5-.4-.7L18.4 2c.2-.5-.1-1.1-.6-1.1H9.6c-.5 0-.9.3-1.1.8L4.7 12.9c-.2.5.1.9.6.9h5.3c.2 0 .5.3.4.6z">
        </path></svg>
    </div> 
</template>

and CSS File

.redColor{
    fill : #FF0000;
}
.iconContainer{
    width : 50px;
    height:50px;
    display:inline-block;
}

Try Yourself – Working Playground URL

Conclusion :

It may not be exactly that you are looking for, however you can do almost any operation that lightning-icon or button-icon can do, just add onclick event handler, css properties etc and you are good to go.

Related posts

One thought on “Change Icon Color in Lightning Web Component”

Leave a Reply to computersciencejunction Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.