angular-svg-icons

Setup

Install the package from NPM

npm install angular-svg-icons

Add the script to the HTML

<script src="node_modules/angular-svg-icons/dist/angular-svg-icons.js"></script>

Add angular-svg-icons dependency to your module

angular.module('app', ['angular-svg-icons']);

Configure the component with the path of the svg sprites file and the folder of individual svg

angular.module('app').config(['$svgIconProvider', function($svgIconProvider){
  $svgIconProvider.spritesFile('symbol/svg/sprite.css.svg');
}]);

Use the component in the HTML

<svg-icon name="'star'" height="20" width="20"></svg-icon>

Add the CSS

<link rel="stylesheet" href="node_modules/angular-svg-icons/dist/angular-svg-icons.css">

You can also import the SCSS file from the src folder.

Generate the SVG sprites

TODO

Configuration

TODO

Browsers support

| Chrome | Firefox | IE | Edge | Opera | Safari | | -------- | -------- | ---------------- | ----------------------- | -------- | ------ | | Latest ✔ | Latest ✔ | 9+ with fallback | 12 with fallback, 13+ ✔ | Latest ✔ | 6+ ✔ |

The fallback consists of an AJAX call to the svg and an inline display of the svg sprite.