Angular Basics: How to Use SVG Icons in Angular

SVG icons let you add icons to your code without importing complex font libraries. Here’s how to create a reusable SVG  icon by first making an SVG component.

What is SVG?

SVG, or Scalable Vector Graphics, is an XML-based file format for describing two-dimensional vector graphics. They are scalable, perfect for web browsers, smaller than most other graphic images, and styled with CSS. They are best used for versatile icons, not 4k photographic images.

You will often see them have a file extension of .svg, although they will usually be pasted directly within an HTML page due to their XML format being easily compatible with HTML.

Get Some SVG Icons

Tailwind pushes the Hero Icons website. However, make sure you install Tailwind for Angular first.

Otherwise, there is a plethora of SVG icons available everywhere. Just throw a dart at Google with SVG somewhere in the search term, or create your own in Adobe or any image program.

Creating an SVG Component

To create an SVG component, simply create a regular component in angular ng g c svg-component. You can name your component anything besides svg-component. You also have the option to rename the HTML file to .svg. Make sure to edit the templateUrl as well:

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

@Component({
  selector: 'app-svg',
  // update file extension here... <-----
  templateUrl: './svg.component.svg',
  styleUrls: ['./svg.component.css']
})
export class SvgComponent {
   ...
}

This is from the Angular SVG example. However, I prefer to use Tailwind for styling and keep it simple.

Simple SVG Component

First create a simple SVG component using:

ng g c svg --inline-style=true --inline-template=true

You can of course create your whole project that way:

ng new svg-project --inline-style=true --inline-template=true

I also get rid of the styles option since we are using Tailwind.

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

@Component({
  selector: 'app-svg',
  template: ``
})
export class SvgComponent { }

We can make a reusable SVG icon by pasting the SVG component inside the template. We can also create a class Input variable that can be reused for Tailwind styling. This example is just using the building-office icon.

Input Decorator

@Input() class = '';

Bind the Class

<svg ... [class]="class" ... >

Final Code

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

@Component({
  selector: 'app-svg',
  template: `
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      [class]="class"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"
      />
    </svg>
  `
})
export class SvgComponent {
  @Input() class = '';
}

Now we can use and reuse the icon anywhere the component is imported in a standalone component or module, and add the appropriate styling (Tardis anyone?):

<app-svg class="w-8 h-8 bg-sky-800 text-white" />

Final Thoughts

SVG icons are just an easy way to add icons to your code without importing complex font libraries like Material Icons. They can be customized with CSS, and can make your development time decrease by hours. Definitely use them in your Angular applications.

Using Kendo UI for Angular?

The new Angular SVGIcon component from Progress Kendo UI for Angular does makes the process of creating SVG icons super simple, PLUS already comes with 500+ SVG icons. See the component demo.

And if you aren't already using Kendo UI for Angular, it comes with a free 30-day trial. Check it out:

Try Kendo UI for Angular