@hakuryo/svg-icon

A lightweight and easy-to-use SVG icon library for Angular, designed to simplify SVG management in your applications.

@hakuryo/svg-icon provides a centralized icon registry that allows you to register, load, and reuse SVG icons across your Angular application.

Icons are loaded on demand and cached automatically, preventing unnecessary HTTP requests when the same icon is used multiple times.

Features

• Lightweight — A simple solution without unnecessary dependencies.
• Lazy loading — SVG icons are loaded only when needed.
• Automatic caching — Each icon is fetched only once and shared across components.
• Centralized registry — Register and manage your SVG icons in one place.
• Easy styling — Customize icon size and color using CSS.
• Angular Signals — Built with Angular's reactive Signals API.
• Standalone component — Easily integrate SVG icons into modern Angular applications.

How to load icons

import {SvgIconRegistry} from '@hakuryo/svg-icon';

export class App {
  private svgIconRegistery: SvgIconRegistry = inject(SvgIconRegistry);
  icons = ['link', 'gear', 'filter', 'mail', 'pdf', 'bars', 'bike', 'trash', 'plus',
    'edit', 'location', 'house', 'mybike', 'more', 'check', 'check-double', "close", "depot", "user", "calendar", 'dollar', 'memo',
    'chevron-left', 'admin', 'manager', 'users', 'location',
    'circle-bike', 'circle-tag','circle-user','circle-booking','tag','clipboard','save','info','chevron-down','chevrons-down'];
    
  constructor() {
    this.icons.forEach(icon => {
      //if trusted parameter is false, icon will not bypassSercurityTrust use by angualr.
      this.svgIconRegistery.register(icon,`/svgs/${icon}.svg`,true);
    });
  }
}

How to use in your component

  <svgIcon name="chevrons-down"></svgIcon>

HTML rendering with a Font Awesome svg icon

<svgicon name="chevron-down" class="rotate-90 size-4.5">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
    <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"></path>
  </svg>
</svgicon>