Blog>
Snippets

Angular SVG Icons Component

Create a reusable Angular component that renders SVG icons by taking the icon name as an input parameter and using the Angular template to select the correct SVG content.
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-svg-icon',
  template: `
    <svg [ngSwitch]='iconName' attr.width='24' attr.height='24' viewBox='0 0 24 24'>
      <ng-template [ngSwitchCase]="'home'">
        <path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/>
      </ng-template>
      <ng-template [ngSwitchCase]="'settings'">
        <path d='M19.14,12.94l1.43-1.43l-1.06-1.06l-1.43,1.43C17.75,11.81,17.4,11.5,17,11.26V9.5l1.39-1.39
         C18.59,7.89,18.59,7.1,18,6.51l-2.12-2.12c-0.59-0.59-1.38-0.59-1.97,0L12,4.93L9.09,2.02C8.5,1.43,7.71,1.43,7.12,2.02
         L5,4.14C4.41,4.73,4.41,5.52,5,6.11L6.39,7.5v1.76c-0.4,0.24-0.75,0.55-1.06,0.93l-1.43-1.43l-1.06,1.06l1.43,1.43
         c-0.18,0.5-0.29,1.02-0.29,1.57s0.11,1.07,0.29,1.57l-1.43,1.43l1.06,1.06l1.43-1.43c0.31,0.38,0.66,0.69,1.06,0.93v1.77l-1.39,1.39
         c-0.59,0.59-0.59,1.38,0,1.97l2.12,2.12c0.59,0.59,1.38,0.59,1.97,0l2.91-2.91l2.91,2.91c0.59,0.59,1.38,0.59,1.97,0l2.12-2.12
         c0.59-0.59,0.59-1.38,0-1.97L16.61,14.5v-1.77c0.4-0.24,0.75-0.55,1.06-0.93l1.43,1.43l1.06-1.06l-1.43-1.43
         C19.25,13.93,19.37,13.43,19.37,12.94S19.25,11.96,19.14,12.94z'/>
      </ng-template>
      <!-- Add additional ng-template blocks for other icons as needed -->
    </svg>
  `, // Use backticks for multiline strings
  styleUrls: ['./svg-icon.component.css']
})
export class SvgIconComponent implements OnInit {
  @Input() iconName: string;
  
  constructor() { }
  
  ngOnInit(): void {
  }
}
This code snippet defines an Angular component 'app-svg-icon' that accepts an 'iconName' as an input and uses the ngSwitch directive to display the corresponding SVG icon. Each icon is defined as an SVG path within an ng-template tag which is selected based on the 'iconName' provided. Users can add additional icons by adding more ng-template blocks with corresponding SVG paths.