icon.service.ts

icon.service.ts

import { Injectable } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';

@Injectable({
  providedIn: 'root'
})
export class IconService {
  constructor(private _iconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {}
  addSvg(icon: IconDefinition) {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${icon.icon[0]} ${icon.icon[1]}">
        <path d="${icon.icon[4]}" />
      </svg>`;

    this._iconRegistry.getNamedSvgIcon(icon.iconName, icon.prefix).subscribe(
      () => {
        //Ok, icon already exists
      },
      () => {
        //Error, not found, add it
        this._iconRegistry.addSvgIconLiteralInNamespace(
          icon.prefix,
          icon.iconName,
          this._sanitizer.bypassSecurityTrustHtml(svg)
        );
      }
    );
  }
}