2

Based on the documentation, you can set a background color on an SVG icon by appending a class name of the icon container element using the following pattern:

.slds-icon-[sprite name]-[icon name]

Which is great and according to the example it works:

.slds-icon-standard-account

When I try to do the same thing for the custom sprite and one of the 100 custom icons:

.slds-icon-custom-custom19

It does not work.

Is the documentation wrong or am I missing something trivial here?

4

Ok, so I had to open the .css file from the lightning design system and search for these class names. It turns out that either documentation is a bit out of whack, or whoever was writing the class names became a little lazy :).

So, in order to set a background of an icon from the custom sprite, you only need to specify the icon NUMBER and not the whole icon name. For an example if you want to use the icon custom15, the class name will be:

.slds-icon-custom-15 and not .slds-icon-custom-custom15

| improve this answer | |

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.