SVG icons use the combination of <svg> and <use> elements. The icon is dictated by the name after the hash in the <use> element's href. You can view the options in the icon directory.
It's imperative that you include the viewBox attribute as shown below.
Prefixing the href attribute with xlink: is required for SVG images to display in Safari and iOS devices.
<svg class="icon" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#check-circle"></use>
</svg>Notice in the usage instructions above the icon source file is referenced as /assets/svgs/icons.svg. It's ideal to have this file local to your project, as there are limitations to working with the <use> element while referencing an external file.
There are instructions on using Angular CLI to load assets into your project here.
If you'd like to access the assets externally, they are uploaded to S3 with each release. They are named with their version number. For example, the icon sprite file for 0.14.0 is available at https://d1tmclqz61gqwd.cloudfront.net/images/icons-0.14.0.svg.
New icons are generated using the source Sketch file. This process is documented in src/assets/svgs/README.md in the crds-styles project.
