1

I'm trying to use different icons included in the icon package on the lightning design system. I'm rendering them inside a lightning component that is available in the Community Builder tool. I'm a bit unclear as to how to use the name="" property. It is building a string value for the css class, but I cannot find any reference to these classes.

Specifically I'm trying to use the "moneybag" icon. On this reference page:

https://www.lightningdesignsystem.com/icons/

The icon I want to use is listed under both "Custom Icons" section (custom17) as well as "Utility Icons" section (moneybag)

When I try to render the icon using:

<c:svgIcon 
   svgPath="{!$Resource.SLDS213 + '/assets/icons/standard-sprite/svg/symbols.svg#opportunity'}" 
   category="standard" 
   size="x-small" 
   name="opportunity" />

This works. However, trying to replace:

symbols.svg#opportunity with symbols.svg#moneybag or symbols.svg#custom17 doesn't work (yellow background displayed, but no icon)

I'm not sure where is is referenced that name="opportunity" makes the background color yellow. I also don't understand why some of icons on the reference page work, and others don't.

Improve this question

1 Answer 1

Reset to default
4

This is because "opportunity" icon belongs to standard set, "moneybag" is a part of utility set, change "standard" to "utility".

"custom17" belongs to custom icons category.

The easiest way to troubleshoot such things is to download SLDS static resource zip file (after install it become available), unzip it and browse directories with icons.

To answer your second question: SLDS has special styling for standard icons

for example account icon's wrapper span will have slds-icon-standard-account css class

UPD 11/08/2016 10:15 am CST: there should be symbols.html file next to svg folder, open this html file in browser and lookup the right symbol name.

UPD 11/08/2016 10:20 am CST: Account and opportunity are standard entities. all of the css for account, opportunity and other entities can be found in css file /assets/styles/salesforce-lightning-design-system-ltng.css

Improve this answer
7
  • Ah! I don't know why I didn't think of that (category relation to path structure). However, I'm still unclear on the second topic - What's the significance of 'account' or 'opportunity' in these class names? Is there a reference for this? The link you provided isn't very clear...
    – Ian Tunbridge
    Commented Nov 7, 2016 at 17:18
  • the name is /assets/icons/custom-sprite/svg/symbols.svg#custom17, works for with SLDS104 for sure. to trouble shoot this case, there should be symbols.html file next to svg folder, open this html file in browser and lookup the right symbol name.
    – Pavlonator
    Commented Nov 8, 2016 at 16:17
  • Account and opportunity are standard entities. all of the css for account, opportunity and other entities can be found in css file /assets/styles/salesforce-lightning-design-system-ltng.css
    – Pavlonator
    Commented Nov 8, 2016 at 16:17
  • @Ian Tinbridge >not showing the icon. Is it not in the dom or not just visible. all of these svgs are white on transparent, so if background is white they are just not visible white on white.
    – Pavlonator
    Commented Nov 8, 2016 at 16:56
  • are you using installed SLDS package or the one which goes pre-installed in winter17 org? If this is a pre-installed one - it goes without icons as far as i can tell.
    – Pavlonator
    Commented Nov 8, 2016 at 17:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .