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 :
|
1 2 3 4 5 |
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* ---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
|
1 2 3 4 5 6 7 8 |
<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 🙂
4 comments
Its useful. thanks for sharing