angular-icon
Simple SVG icon component for Angular 2+ to use SVG icons from SVG sprite.
Now only inlined SVG sprites supported. SVG srpites from separate source unsopported by IE browsers.
SVG icons implements a11y features using img
aria-role and aria-label
.
All icons used currentColor
value for SVG fill
property.
Some helpful information regarding SVG sprives creation and usage - CSS-Tricks article.
Instalation
-
npm
npm install --save angular-icon
-
yarn
yarn add angular-icon
Usage
Import IconModule
to your Angular app module or any other submodule where it will be used:
;; ; // Import module with svg icon component declaration. ;
After this component is ready to use in your templates:
This will be transformed in following HTML markup:
Available properties
name
Type: String
Icon name that should be equal to icon id
inside svg sprite.
alt
Type: String
Icon alternative text used for aria-label
property that used by screen readers (a11y).
size
Type: number
Sets size in pixels for both SVG width
and height
properties. Makes icon square.
svgWidth
Type: number
Sets size in pixels for SVG width
property.
svgHeight
Type: number
Sets size in pixels for SVG height
property.
TODO:
- Implement icons namespacing
- Implement remote SVG sprite support
- Add SVG icons fetching and inlining for non-supported browsers
- Implement service to register icons, icon sets
- Implement SVG sprite inlining only for AOT compilation mode