Change Icon Color in Lightning Web Component

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.


Posted

in

by

Comments

5 responses to “Change Icon Color in Lightning Web Component”

  1. computersciencejunction Avatar

    Nice Article.I found this useful and informative.
    Thanks Sir

  2. What is DBMS Avatar

    This is what I was searching for so far. Now I can change the color of my web component.

  3. Birthday Images Avatar

    You have written a nice post. I was searching for this and thanks a lot I came to your blog, this helped me a lot, you given a comprehensive detail of the topic

  4. Mahendra sahu Avatar
    Mahendra sahu

    how can we change the standard icon?

Leave a Reply

Your email address will not be published. Required fields are marked *

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