Changing background on a custom icon

[e-bacho]

Based on the docs, I tried setting the following class name on the icon container .slds-icon-custom-custom1 and it's not working. It only works with the standard sprite. Am I missing something here?

[e-bacho]

Ok after I opened up the css file, I can see that the class names are a bit of out whack, instead of using the icon name custom48 for example, you need to only specify the number 48 so that the class name becomes .slds-icon-custom-48. Please update the documentation or the CSS to be inline.

[kaelig]

Thank you so much @e-bacho for using the design system and for asking us about this. Let me try to reproduce it and see how we can sync the documentation with the code.

[kaelig]

Thanks again, @e-bacho! We have amended the documentation to reflect the class names for custom icons: https://www.lightningdesignsystem.com/components/icons/#flavor-background-colors. We are also looking into making the naming more consistent, as you were suggesting.

Closing this as we are having an internal discussion about class names, and the documentation is now up to date.

[kaelig]

Starting in v1.0.5 (just released!), you may use slds-icon-custom-customXX classes for custom icons. Thank you again for pointing that out!