Using an SVG sprite icon system in Angular

Whether it’s icon fonts or SVG sprites you use as icon sets in your application is your decision. However, we’ll cover some advantages that SVG sprites have, but most importantly how you can implement them in Angular.

Create a new component file called: svg-icon.component.ts, and add the following content.

import {
} from '@angular/core';

selector: 'svg-icon',
template: `
// SVG elements don't have properties, therefore attribute binding is needed
<use attr.xlink:href="assets/symbol-defs.svg#{{icon}}"></use>
export class SvgIconComponent {
@Input() icon: string;

Next, register our new component to the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SvgIconComponent } from './svg-icon.component';

declarations: [
imports: [
providers: [],
bootstrap: [AppComponent]
export class AppModule {

Finally, update app.component.ts so it consumes our newly created component.

import { Component } from '@angular/core';

selector: 'app-root',
styleUrls: ['./app.component.scss'],
template: `
<svg-icon icon="icon-images" class="icon"></svg-icon>
export class AppComponent {

Create a svg-icon.component.scss file, and replace the content with the following.

:host {
display: inline-block;

svg {
display: inline-block;
all: inherit;
Source Code

Recent Article

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Keep your skills sharp, get informed.

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox