Icons have become a quintessential staple to digital communication. In the same way that images provide words with contextual meaning, emoticons provide emotional context for instant messaging. Digital communication is simply incomplete without images.
Vector-based icons are superior to raster-based icons when it comes to crisp, scalable rendering and there are a couple of popular delivery mechanisms: SVGs and Icon Fonts. Salesforce has done a thorough job of creating a comprehensive and flexible SVG icon system.
SVGs are great for modern browsers and can be manipulated by CSS and JavaScript making them an extensible choice. On the other hand, an icon font enjoys all of the benefits of CSS font styling. Anything that you can do with a font, you can do with an icon font. But rather than starting a Vim versus Emacs style debate on which icon implementation is better, allow me to arm you with an SLDS Icon Font. BAM. Take that pro-SVG camp!
This SLDS Icon Font is based on the Salesforce Lighting Design System SVG set (version 0.10.1) and generated using Icomoon. This icon font replicates all of the SVGs available in SLDS. The implementation is simple.
Basic Usage
On an empty inline element, add the class name of the respective icon. The naming scheme goes like this: sldsicon-[categoryName]-[fontName]. After the sldsicon prefix, the naming convention is similar to the one located in the SLDS docs.
Example: <i class="sldsicon-utility-add"></i>.
The only caveat is with the SLDS doctype icons which use two layers. The markup to render those looks like this:
<span class="sldsicon-doctype-audio"> <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span> </span>
Check out the GitHub repository, NPM Package, a Nifty utility to search and copy the Icon Font, and the Lighting Design System.
