Icon color <svgIcon> helper component (Community Lightning)

Question

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?

Answer 1

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.

Answer 2

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;
}