An Angular directive and service to easily embed svg in html, such as svg icons, that can be styled and animated

Run Showcase on Stackblitz select SVG icons showcase

import { FarfaSvgModule, FarfaSvgService } from "@farfadev/ngx-svg";

under the @NgModule or standalone @Component decorator

@Component({
  ...
  imports: [..., FarfaSvgModule, ...],
  ...
})

Inject the FarfaSvgService in the constructor of the host component that will load SVGs

  constructor(private svgService: FarfaSvgService) {
  }

Under the NgOnInit lifecycle hook of the host component, load some SVGs (either from local asset directory or from a web url) and assign them a reference name

  ngOnInit() {
    this.svgService.loadSVG('myicon', 'assets/myicon.svg')
      .catch((error) => {
         // alert(error); 
      });
  }

// component.ts
@Component({
  ...
  imports: [..., FarfaSvgModule, ...],
  ...
})

In the html template of the component,

<!-- component.html -->
<!-- with inline style -->
<i style="display: inline-block; height: 1em; width: 1em" [farfa-svg]="{name: 'myicon'}">
<!-- or with css class -->
<i class="myicon" [farfa-svg]="{name: 'myicon'}">

In the css stylesheet of the component,

.myicon {
  display: inline-block;
  height: 1em;
  width: 1em;
}

<!-- embed inline SVG -->
<i class="myicon" [farfa-svg]="{svg: '<svg viewBox=&quot;0 0 100 100&quot;><path d=&quot;M0, 20 Q50, 20 100, 20&quot;></path></svg>'}">

<!-- embed SVG from URL -->
<i class="myicon" [farfa-svg]="{svg: '/assets/mySvgFile.svg'}">

<!-- set some svg attributes -->
<i class="myicon" [farfa-svg]="{svg: '/assets/mySvgFile.svg', attributes: {stroke: 'red'}}">

<!-- set a background rectangle in the svg -->
<i class="myicon" [farfa-svg]="{svg: '/assets/mySvgFile.svg', rect: 'rectid'}">