[SalesForce] Lightning Icon Background color not changing

I have a lightning icon in my lightning component. It is an icon of type standard and I want to change its color:

Component

<div class="slds-media__figure">
    <lightning:icon iconName="standard:currency" class="cashAccountIcon" size="small"/>
</div>

Controller

.THIS.cashAccountIcon svg {
    fill : red;
}

However, the color is not changing in the above code. Is that a problem with my code or we cannot change backgrounds of standard icons?

Best Answer

The .THIS.myClass, with the period attaching THIS and myClass tries to look for the root element and whether it has myClass associated with it. Assuming your icon is not the root element in the component, try using .THIS .cashAccountIcon svg { with a space between .THIS and .cashAccountIcon

For what it's worth, if you use VS Code, you can hover over the .THIS ... line of code and see what kind of document structure it is trying to apply the CSS to.

Related Solutions

[SalesForce] How to use SLDS SVG icons with lightning:tabset

With Winter 17 ,I would use lightning:icon instead of SVG .

Below is the markup for same

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

If you observe iconName attribute then you can use any icon from the set defined here

Be sure to use lower case letters and the name is separated by ":" where left string will use either "action,custom,doctype,standard,utility" while right string after colon will be name of the icon .

Update

The label attribute of the lightning:tab is defined of type "Component[]" which means you can use aura:set explicitly to set these to any other lightning component .Using this property of the lightning component to our advantage the tag will be like below

<aura:component>
  <lightning:tabset>
    <lightning:tab>
        <aura:set attribute="label">
            Item One
            <lightning:icon iconName="action:approval" />
        </aura:set>
    </lightning:tab>
</lightning:tabset>

[SalesForce] SVG Icon button size not rendering as x-small

Got how to do it. lightning:button should be used. Following is the markup:

<lightning:button aura:id="undoButton" variant="base" onclick="{!c.onUndo}" iconName="utility:undo" iconPosition="right" class="slds-button slds-button--icon slds-hide"/>
<lightning:button aura:id="editButton" variant="base" onclick="{!c.onEdit}" iconName="utility:edit" iconPosition="right" class="slds-button slds-button--icon slds-show"/>

Still have to work on the 'onHover type change to dark/fade', but that will be done :)

Best Answer

Related Solutions

[SalesForce] How to use SLDS SVG icons with lightning:tabset

[SalesForce] SVG Icon button size not rendering as x-small

Related Topic