function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ami PandaAmi Panda 

How to display the following lightning icon in blue?

 <a><lightning:icon aura:id="icon1" class="icon_chat" size="small" iconName='utility:chat' /></a>

User-added image
Best Answer chosen by Ami Panda
Khan AnasKhan Anas (Salesforce Developers) 
Hi Ami,

Greetings to you!

Use below CSS:
 
.THIS .icon_chat svg {
    fill : blue;
}


Please refer to the below links for more information:

http://sfdcmonkey.com/2017/12/22/change-lightningicon-color/

https://salesforce.stackexchange.com/questions/147153/lightning-icon-color-is-not-changing-using-the-fill-css?rq=1

https://developer.salesforce.com/forums/?id=9060G000000XefKQAS



I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas

All Answers

Sampath SuranjiSampath Suranji
Hi,
try like below
Component
<a><lightning:icon class="clsChat" size="small" iconName='utility:chat' /></a>
add following to the component's css(STYLE) page
.THIS .clsChat svg{
    fill : blue;
}
regards

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Ami,

Greetings to you!

Use below CSS:
 
.THIS .icon_chat svg {
    fill : blue;
}


Please refer to the below links for more information:

http://sfdcmonkey.com/2017/12/22/change-lightningicon-color/

https://salesforce.stackexchange.com/questions/147153/lightning-icon-color-is-not-changing-using-the-fill-css?rq=1

https://developer.salesforce.com/forums/?id=9060G000000XefKQAS



I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
This was selected as the best answer