0

The aqua color icon is visible on the UI, and I want a blue background. The flight white color is fine; only the background color has to change. using icon-name="custom:custom20"

enter image description here

 <c-Flight-Search obj-name="flight__c" search-placeholder="From" icon-name="custom:custom20" onclick={handleSet}>
 </c-Flight-Search>

1 Answer 1

2

Hi as per this documentation here, you can change the background colour using the css styling hooks

You can add this lines to your .css file

:host{
    --slds-c-icon-color-background: blue; 
}

Change the blue to preferred color, using whichever method you prefer :)

After adding the above css, this is how my icon looks like:
enter image description here

Hope it helps!

Edit:

.html

<template>
    <lightning-card>
        <lightning-icon icon-name="custom:custom20" class="changethis">
        </lightning-icon>
        <lightning-icon icon-name="custom:custom20">
        </lightning-icon>
   </lightning-card> 

.css

.changethis{
--slds-c-icon-color-background: blue;
} 

this will make sure only the icon with the class="changethis" will have the background color changed.

2
  • :host impacted all other icons like dropdown icon also changed!!!. I want only airplane background color only @prem22 Jul 5, 2023 at 12:29
  • then just add a class to the tags that you to change the colour and apply the css to those class only, I have edited my answer added some code examples for you above
    – prem22
    Jul 5, 2023 at 15:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .