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.
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
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.
<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.
Leave a Reply