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.

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.