How to Render and Style SVG Icons in Angular

Rendering and styling Scalable Vector Graphics (SVG) within Angular component templates can be achieved through inline markup, dedicated icon components, or Angular Material’s icon registry. This guide covers the primary methods for embedding SVGs in Angular applications, binding dynamic attributes to them, and controlling their appearance using standard CSS properties and Angular bindings.

Methods for Rendering SVG Icons

1. Direct Inline SVGs

The simplest approach is placing the <svg> element directly into the component’s HTML template. This grants Angular full access to the SVG DOM, enabling direct attribute and structural bindings.

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  [attr.viewBox]="viewBox" 
  [attr.width]="size" 
  [attr.height]="size"
  class="icon">
  <path [attr.d]="iconPath" />
</svg>

When binding to SVG attributes like viewBox, cx, cy, or d, use the [attr.attributeName] syntax rather than standard property binding, as SVGs rely on XML attributes rather than standard DOM element properties.

2. Custom Icon Component

To make icons reusable across the application, you can encapsulate SVG rendering into a dedicated Angular component.

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

@Component({
  selector: 'app-icon',
  standalone: true,
  template: `
    <svg 
      class="app-icon"
      [attr.width]="size" 
      [attr.height]="size" 
      viewBox="0 0 24 24" 
      fill="none">
      <use [attr.href]="'/assets/icons/sprite.svg#' + name"></use>
    </svg>
  `,
  styleUrls: ['./icon.component.css']
})
export class IconComponent {
  @Input() name: string = '';
  @Input() size: number = 24;
}

Using the <use> element referencing an external SVG sprite sheet minimizes template size while keeping icons dynamic.

3. Angular Material MatIconRegistry

If using Angular Material, MatIconRegistry and DomSanitizer allow you to register external SVG files or strings securely.

import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<mat-icon svgIcon="custom-icon"></mat-icon>`
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'custom-icon',
      sanitizer.bypassSecurityTrustResourceUrl('assets/icons/custom-icon.svg')
    );
  }
}

Styling SVG Icons

CSS Fill and Stroke Control

The standard way to style SVG colors in CSS is through the fill and stroke properties. Using currentColor allows SVGs to inherit the text color of their parent element automatically.

.app-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  transition: fill 0.2s ease-in-out;
}

.button:hover .app-icon {
  fill: #0056b3;
}

Dynamic Property and Class Bindings

Angular’s [ngClass] and [style] directives allow you to dynamically alter SVG appearance at runtime based on component state.

<svg 
  class="status-icon"
  [class.is-active]="isActive"
  [style.fill]="customColor">
  <circle cx="12" cy="12" r="10" />
</svg>

Handling Angular View Encapsulation

Because Angular uses emulated View Encapsulation by default, styles defined in a parent component will not cascade into SVGs injected dynamically via [innerHTML] or third-party components unless CSS custom properties (variables) or :host selectors are used:

:host {
  display: inline-flex;
  --icon-color: #333;
}

:host svg {
  fill: var(--icon-color);
}

By leveraging inline attribute bindings, CSS inheritance with currentColor, or shared SVG sprites, Angular provides a flexible and performant environment for managing vector graphics.