function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Vipin PVipin P 

Icon color is not changing using the fill CSS

According to the documention (https://www.lightningdesignsystem.com/components/icons/ ) we can chnage the icon color by suing the CSS. I am not able to do it. It always overides with the Salesforce style. 
<lightning:icon class="icn"  iconName="utility:favorite" size="small" />
  
.THIS .icn{
 fill: white; 
}

Other css property like baground color are applying but fill is always getting overirdder by salesfroce defult color ( grey). Any one have any idea on how to fix this ?
Best Answer chosen by Vipin P
Vipin PVipin P
The issue got resolved by applyng the style to svg. 
.THIS .icn svg{
 fill: #e6e6e6; 
   
}
Thanks to Sumuga ( http://salesforce.stackexchange.com/questions/147153/lightning-icon-color-is-not-changing-using-the-fill-css )

 

All Answers

RohRoh
Hello Vipin,
Can you please try like below. A space might be needed if its the child of an element.
. THIS .icn{ fill: white; }

Please mark this as the best answer, if it serves the purpose.

Thanks,
Rohit Alladi
Vipin PVipin P
Space before THIS gives syntax error. I tried with space and without space before 'icn', but that didn't fix.
Vipin PVipin P
The issue got resolved by applyng the style to svg. 
.THIS .icn svg{
 fill: #e6e6e6; 
   
}
Thanks to Sumuga ( http://salesforce.stackexchange.com/questions/147153/lightning-icon-color-is-not-changing-using-the-fill-css )

 
This was selected as the best answer
Vinod N 6Vinod N 6
How to change doctype icon colors:

<lightning:icon class="icn" iconName="doctype:pdf" size="small" />
Vinod N 6Vinod N 6
I am trying this way
.THIS.icn svg {
    fill:orange !important;
}
.THIS.icn{
    background-color:blue !important;
}