Css classes for SLDS Icons — An easier way to use them!

SLDS Icons

The way SLDS invites you to use their icons pack has always disappointed me. First, you have to use a complex combination of paths and classes to get the right shape, color and size for your icons. Then, the SVG tag became forbidden with Locker Service and you add to use their lightning:icon component with which you lose total control and rely on the attributes available for you.

<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
  <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>
  <span class="slds-assistive-text">Description of icon when needed</span>
</span>

Use a font instead of SVG

I was looking for a better and easier to includes these beautiful icons into my projects like I used to do with font-awesome. Then I found this excellent tool IcoMoon which allows me to generate a font from SVG files. After some rework on the icons (same scale, reset colors), I’ve managed to create my own font.

You just have to import the stylesheet and then add prefix icon names with slds-icon-

Icon names are referenced here.

Example

<i class="slds-icon-adduser" style="font-size:24px"/>
<i class="slds-icon-account" style="color:#2ecc71"/>

You now have control of the size, the color, the background, the shape… Everything you want to do with them.

Here is my repository with the fonts and the stylesheet. Enjoy !