Angular 显示来自文字数组的SVG路径

我想要显示保存在ts文件数组中的SVG图标，在模板中，但InnerHTML似乎不起作用，我如何修复它？

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>