My <svg> tag is not getting rendered in DOM using *ngFor in Angular-CodePudding

I want to change the icon color on hover

I cannot do it with adding icon as image

I can do it by using svg tag with svg:hover{fill: red;} in css but my svg tag is not rendering in dom using *ngFor loop

I caanot render <path d="{{element.path}}" /> s some svg's have multiple path elements

side-panel.component.html

<div class="side-panel mt-2">
  <div
    class="elements d-flex justify-content-start"
    *ngFor="let element of elements"
  >
<!-- <div ><img src="{{ element.icon }}" alt="" /></div> -->
    <div>{{ element.svg }}</div>
    <div class="description p-2">{{ element.description }}</div>
  </div>
</div>

side-panel.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-side-panel',
  templateUrl: './side-panel.component.html',
  styleUrls: ['./side-panel.component.css'],
})
export class SidePanelComponent implements OnInit {
  constructor() {}

  elements = [
    {
      icon: '../../../assets/sidebar-icons/1.svg',
      description: 'Tableau de bord',
      svg: `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3186 2.6664C11.2439 1.77787 9.7561 1.77787 8.68145 2.6664L3.29539 7.11964C2.80425 7.52572 2.5 8.16727 2.5 8.8663V15.8109C2.5 17.0784 3.45214 18 4.5 18H6.5V14.7478C6.5 12.4927 8.23415 10.5587 10.5 10.5587C12.7659 10.5587 14.5 12.4927 14.5 14.7478V18H16.5C17.5479 18 18.5 17.0784 18.5 15.8109V8.8663C18.5 8.16727 18.1958 7.52572 17.7046 7.11965L12.3186 2.6664ZM13.593 1.12502L18.979 5.57827C19.9494 6.38059 20.5 7.59705 20.5 8.8663V15.8109C20.5 18.066 18.7659 20 16.5 20H14.5C13.3954 20 12.5 19.1046 12.5 18V14.7478C12.5 13.4803 11.5479 12.5587 10.5 12.5587C9.45214 12.5587 8.5 13.4803 8.5 14.7478V18C8.5 19.1046 7.60457 20 6.5 20H4.5C2.23415 20 0.5 18.066 0.5 15.8109V8.8663C0.5 7.59705 1.05059 6.38059 2.02097 5.57827L7.40703 1.12502C9.22126 -0.375008 11.7787 -0.375006 13.593 1.12502Z" fill="#020A26"/>
</svg>`,
    },
    {
      icon: '../../../assets/sidebar-icons/2.svg',
      description: 'Dossiers',
      svg: `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 2C3.39543 2 2.5 2.89543 2.5 4V16C2.5 17.1046 3.39543 18 4.5 18H16.5C17.6046 18 18.5 17.1046 18.5 16V7.375C18.5 6.27043 17.6046 5.375 16.5 5.375H11.5704C10.5673 5.375 9.63061 4.8737 9.07422 4.0391L8.01168 2.4453C7.82622 2.1671 7.51399 2 7.17963 2H4.5ZM0.5 4C0.5 1.79086 2.29086 0 4.5 0H7.17963C8.18269 0 9.11939 0.501303 9.67578 1.3359L10.7383 2.9297C10.9238 3.2079 11.236 3.375 11.5704 3.375H16.5C18.7091 3.375 20.5 5.16586 20.5 7.375V16C20.5 18.2091 18.7091 20 16.5 20H4.5C2.29086 20 0.5 18.2091 0.5 16V4Z" fill="#020A26"/>
</svg>`,
    },
    {
      icon: '../../../assets/sidebar-icons/3.svg',
      description: 'Session',
      svg: `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 6C0.5 3.23858 2.73858 1 5.5 1H15.5C18.2614 1 20.5 3.23858 20.5 6V15C20.5 17.7614 18.2614 20 15.5 20H5.5C2.73858 20 0.5 17.7614 0.5 15V6ZM5.5 3C3.84315 3 2.5 4.34315 2.5 6V15C2.5 16.6569 3.84315 18 5.5 18H15.5C17.1569 18 18.5 16.6569 18.5 15V6C18.5 4.34315 17.1569 3 15.5 3H5.5Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 0C7.05228 0 7.5 0.447715 7.5 1V4C7.5 4.55228 7.05228 5 6.5 5C5.94772 5 5.5 4.55228 5.5 4V1C5.5 0.447715 5.94772 0 6.5 0Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 8C4.5 7.44772 4.94772 7 5.5 7H15.5C16.0523 7 16.5 7.44772 16.5 8C16.5 8.55228 16.0523 9 15.5 9H5.5C4.94772 9 4.5 8.55228 4.5 8Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 15C13.5 14.4477 13.9477 14 14.5 14H15.5C16.0523 14 16.5 14.4477 16.5 15C16.5 15.5523 16.0523 16 15.5 16H14.5C13.9477 16 13.5 15.5523 13.5 15Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 0C15.0523 0 15.5 0.447715 15.5 1V4C15.5 4.55228 15.0523 5 14.5 5C13.9477 5 13.5 4.55228 13.5 4V1C13.5 0.447715 13.9477 0 14.5 0Z" fill="#020A26"/>
</svg>`,
    },
  ];
  ngOnInit(): void {}
}

CodePudding user response：

If you want to render the whole svg tag in the dom you should put it in innerHtml of another parent element and sanitize the svg content before you render it:

<div class="path" [innerHtml]="element.svg"></div>

In your component class:

  constructor(private sanitizer: DomSanitizer) {
    this.elements.forEach(
      (e) => (e.svg = this.sanitizer.bypassSecurityTrustHtml(e.svg))
    );
  }

Now to change the color of your svg on hover you should:

remove the fill attribute from your path and your svg
apply a class on your parent div
set the fill style for your svg:

.path { fill: green; } .path:hover { fill: red; }

CodePudding user response：

for using svg icons in angular project exist a problem:

1.create a file for all of svg icons [example this project in the svg-icons directory exist a file => svg-icons-repo.component.ts]

2.using this site [https://svgsprit.es/] can convert svg icons to a standard model

3.then everywhere of project that you need to use svg icons call it with [id]

I create this project with your svg icons