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


Related Posts

Comments

7 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?

  5. Er R S Banger Avatar

    This is most informative post, really we are totally inspired this valuable content. Thanks for sharing!!

  6. Er R S Banger Avatar

    This is most informative post; really we are giving 99/100 score to this article. Thanks for sharing!!

Leave a Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading