Angular - Display svg path from typescript array

Issue

I want to display the svg icons saved in the ts file array, in the template but InnerHTML doesn't seem to work, how can I fix it?

export class SidenavComponent {
  sideBarIcons: IInstagramIcons[] = [
    {
      name: 'Home',
      svgPath: '<svg aria-label="Home" class="x1lliihq x1n2onr6 x5n08af" fill="currentColor" height="24" role="img" viewBox="0 0 24 24" width="24"><title>Home</title><path d="M9.005 16.545a2.997 2.997 0 0 1 2.997-2.997A2.997 2.997 0 0 1 15 16.545V22h7V11.543L12 2 2 11.543V22h7.005Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path></svg>'
    },
    {
      name: 'Search',
      svgPath: `<svg aria-label="Search" class="x1lliihq x1n2onr6 x5n08af" fill="currentColor" height="24" role="img" viewBox="0 0 24 24" width="24"><title>Search</title><path d="M19 10.5A8.5 8.5 0 1 1 10.5 2a8.5 8.5 0 0 1 8.5 8.5Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="16.511" x2="22" y1="16.511" y2="22"></line></svg>`
    },
  ]
}








<nav class="vertical-sidenav-left bg-black w-80 p-10">
  <div class="text-white">
    <ul>
      <!--get svg paths from the ts file array-->
      @for (icon of sideBarIcons; track icon.name){
        <div>{{icon.name}}</div>
        <div [innerHTML]="icon.svgPath"></div>
      }

    </ul>
  </div>
</nav>

Solution

1. Import DomSanitizer:

   import { DomSanitizer } from '@angular/platform-browser';
   

2. put it in constructor:

    public sanitizer: DomSanitizer
   

3. and change your innerHtml line to:

   <div [innerHtml]="sanitizer.bypassSecurityTrustHtml(icon.svgPath)"></div>.
   

Answered By - Misha Mashina