How to Change lightning:Icon Color In Salesforce Lightning Component

Salesforce Lightning provides more than 500 types of Icons, in different variants such as Action icons, Custom icons, Doctype icons, Standard icons and Utility icons.

you can find all of the available icons list here :

https://www.lightningdesignsystem.com/icons

All salesforce lightning icons comes with some default standard colors and background, but you can modify the icon colors style.
So, today in this post we are going to learn that how we can change the ‘lightning:icon’ color in salesforce lightning component to make our component more tempting.

We can use lightning icons in our lightning component using lightning:icon component :

<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_icon.htm

This will represents a visual element that provides context and enhances usability.

 

 

 

Step 1 : Create Lightning Component : iconColor.cmp

From Developer Console >> File >> New >> Lightning Compoenent

<aura:component >
  <lightning:icon class="redOnYellow" iconName="action:new_account" size="large"/>
       <br/> <br/>  
  <lightning:icon class="orangeOnBlack" iconName="custom:custom26" size="large"/>
       <br/><br/> 
  <lightning:icon class="blackOnRed" iconName="standard:account" size="large"/>
       <br/><br/> 
  <lightning:icon class="black" iconName="utility:comments" size="large" />
       <br/><br/> 
</aura:component>

• add class attribute to your lightning:icon tag , and in the css tab give style to your lightning icon.

Component CSS :

iconColor.css

/* ---for action icon 1--- */
.THIS.redOnYellow svg {
    fill : red;
}
.THIS.redOnYellow {
   background-color:yellow !important;
}

/* ---for custom icon 2--- */
.THIS.orangeOnBlack svg{
    fill:orange !important;
}

.THIS.orangeOnBlack {
    background-color:black !important;
}

/* ---for standard icon 3--- */
.THIS.blackOnRed svg{
    fill:black !important;
}

.THIS.blackOnRed {
    background-color:IndianRed !important;
}

/* ---for utility icon 4--- */
.THIS.black svg{
    fill: black;
}

Step 2 : Create Lightning Application for Testing: demo.app

From Developer Console >> File >> New >> Lightning Application

<aura:application extends="force:slds">
    <c:iconColor/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output : 

Check also : 3 Ways to Use CSS In Lightning Component.

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂