2

I'm using the helper component suggested on the Lightning Design System Icon documentation page for adding icons to Community components. I'd like to change the color of the icon, and not use a background (box), but rather just display the colored icon, itself.

Is this behavior supported with this helper component? If not, how would I modify the helper code to support it?

2

Have you thought of using CSS? If you have the ability to modify/append the CSS you could edit the CSS class for the "box" that contains the icon, then change icon color. For example:

.slds-icon-action-add-contact { background-color: none; }

Then set the CSS color for the icon:

.slds-icon { fill: #SomeColorHere; }

There are a few ways this could be accomplished.

My 2 cents.

  • I guess I was expecting the CSS class structure to be included in the SLDS. Seems like a pretty common usage. But perhaps not. – Ian Tunbridge Nov 11 '16 at 16:00
  • I found the SLDS very limited for some of the things I've been working on. Every time I work on Salesforce stuff I feel I'm time traveling back considering how ui technology has evolved in the last few years. Still, SLDS is a big step forward for SF. You probably seen this page about the SLDS icon component: lightningdesignsystem.com/components/icons/#flavor-icon-colors – Omar Salas Nov 12 '16 at 6:31
1

There's now a standard lightning:icon Component you can use instead of implementing your own component for svg support. to style the icon, you'd use the css portion of your lightning component bundle, similar to what Omar mentioned.

Here's what your component might look like:

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <lightning:icon iconName="utility:close" size="small" class="iconStyle"/>
</aura:component

And here's what the .css portion would look like:

.THIS .iconStyle svg{
    fill: #ffffff;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.