Add SVG icons

Usage no npm install needed!

<script type="module">
  import spremiSvgIcon from 'https://cdn.skypack.dev/@spremi/svg-icon';


A simple, yet customizable, module to add SVG icons in Angular 6+ applications.

The icons are included inline. So, they can be manipulated via CSS.

Demo on StackBlitz.


  • Small footprint.
  • No icon registration required.
  • Provides a blank icon for specified size.
    • Can be used as filler.
  • Provides an error icon - used when specified SVG icon is not found.
    • Developers can spot missing icons easily.
  • [NEW] Dynamically change input params.
  • Customizable
    • Set specific icon size.
    • Scale icon by a factor.
    • Set fill color for error icons.
      • Makes it easy to spot missing icons in any theme.
    • Set own error icon.
      • Use failures as opportunity with branded error icons.



  • Features can be demonstrated.
    • Optimization is possible.
  • Documentation almost complete.
  • No test cases.
    • But sample application covers many usage scenarios.
  • Issues/ limitations not known.



npm install --save @spremi/svg-icon


yarn add @spremi/svg-icon


import { HttpClientModule } from '@angular/common/http';

...later, add it to imports:

imports: [BrowserModule, HttpClientModule],

How to use

Import the module

In app.module.ts, import SvgIconModule.

  • Also import HttpClientModule, if not already.
import { SvgIconModule } from '@spremi/svg-icon';

  declarations: [...],
  imports: [BrowserModule, HttpClientModule, SvgIconModule.forRoot()],
  providers: [...],
  bootstrap: [...],
export class AppModule {}

Add icons to the project

Add icons to a sub-directory that can be accessed at runtime.

In the projects generated via @angular/cli, the sub-directory src/assets can be accessed as /assets.

Update HTML template

Add icon as-is:

<ang-svg-icon url="/assets/my_icon.svg"></ang-svg-icon>

Add icon with width and height set as 24 pixels:

<ang-svg-icon url="/assets/my_icon.svg" width="24" height="24"></ang-svg-icon>

Add icon and scale it 2x:

<ang-svg-icon url="/assets/my_icon.svg" scale="2"></ang-svg-icon>


  • For scale to work, original SVG must specify a size (width & height).
  • If scale is specified, it takes precedence over width and height.

How to customize

We need to import SvgIconService as well.

import { SvgIconModule, SvgIconService } from '@spremi/svg-icon';

Set custom fill color for error icons

export class AppModule {
  constructor(private iconSvc: SvgIconService) {

Set custom error SVG

Add markup for the custom error SVG.

  • Ensure it has viewBox defined, so that it scales well.
  • Change width and height to %WIDTH% and %HEIGHT% as shown below.
const CUST_ERROR = `<svg xmlns="http://www.w3.org/2000/svg"
  width="%WIDTH%" height="%HEIGHT%" viewBox="0 0 24 24">
  </svg >`;

export class AppModule {
  constructor(private iconSvc: SvgIconService) {


BSD-3-Clause Copyright Sanjeev Premi