Angular SVG Icon
The angular-svg-icon is an Angular 8 service and component that provides a means to inline SVG files to allow for them to be easily styled by CSS and code.
The service provides an icon registery that loads and caches a SVG indexed by
its url. The component is responsible for displaying the SVG. After getting the
svg from the registry it clones the
SVGElement and the SVG to the component's
This demo shows this module in action.
How to use?
$ npm i angular-svg-icon --save
Note on earlier versions of Angular:
- For Angular 7, use firstname.lastname@example.org
- For Angular 6, use email@example.com
- For Angular 4.3 through Angular 5.x, use firstname.lastname@example.org
- For Angular 2.4 through Angular 4.2, use email@example.com
See the module's accompanying README.md for instructions.
The angular-svg-icon should work as-is with webpack/angular-cli. Just import the
AngularSvgIconModule and the
Basic usage is:
Note that without a height or width set, the SVG may not display!
If svg was previously loaded via registry with name it can be used like this:
More complex styling can be applied to the svg, for example:
The following attributes can be set on svg-icon:
- src - The path to SVG.
- name - An optional name of SVG, under which it was loaded via SvgIconRegistryService.
- [svgStyle] - Styles to be applied to the SVG, this is based on the familiar [ngStyle].
- [stretch] - A boolean (default is false) that, when true, sets
preserveAspectRatio="none"on the SVG. This is useful for setting both the height and width styles to strech or distort the svg.
Programatic interaction with the registry is also possible.
private iconReg:SvgIconRegistryService in the constructor:
The registry has three public functions:
addSvg(string, string), and
To preload a SVG file from a URL into the registry:
To preload a SVG file from a URL into the registry with predefined name:
To add a SVG from a string:
To unload a SVG from the registry.
[applyCss]="true", elements inside the svg (path, polygon, etc.) can be extended via component CSS an
apply animations. This works even if inner elements have declared attributes.
Usage with Angular Universal
When rendering on server-side, the SVGs must be loaded via the file system.
This can be achieved by providing an
SvgLoader to the server module:
The loader itself is up to you to implement because it depends on where your icons are stored locally. An implementation that additionally saves the icons in the transfer state of your app in order to avoid double requests could look like that:
Note that this is executed in a local Node.js context, so the Node.js API is available.
A loader for the client module that firstly checks the transfer state could look like that:
This is executed on browser side. Note that the fallback when no data is
SvgHttpLoader, which is also the default loader if you don't
The SVG should be modified to remove the height and width attributes from the file per Sara Soueidan's advice in "Making SVGs Responsive With CSS" if size is to be modified through CSS. Removing the height and width has two immedate impacts: (1) CSS can be used to size the SVG, and (2) CSS will be required to size the SVG.
The svg-icon is an Angular 2 component that allows for the continuation of the AngularJS method for easily inlining SVGs explained by Ben Markowitz and others. Including the SVG source inline allows for the graphic to be easily styled by CSS.
The technique made use of ng-include to inline the svg source into the document. Angular 2, however, drops the support of ng-include, so this is my work-around method.
- David Czeck @czeckd