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.
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.
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.
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>