如何在Angular 7中使用插值法从JSON文件中提供SVG图标？

[
  {
    "name": "icon1",
    "path": "assets/icons/icon1.svg",
    "color": "#FF0000"
  },
  {
    "name": "icon2",
    "path": "assets/icons/icon2.svg",
    "color": "#00FF00"
  }
]

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IconsService {
  private iconsUrl = 'assets/icons/icons.json';

  constructor(private http: HttpClient) { }

  getIcons(): Observable<any> {
    return this.http.get<any>(this.iconsUrl);
  }
}

import { Component, OnInit } from '@angular/core';
import { IconsService } from './icons.service';

@Component({
  selector: 'app-icon-component',
  templateUrl: './icon.component.html',
  styleUrls: ['./icon.component.css']
})
export class IconComponent implements OnInit {
  icons: any[];

  constructor(private iconsService: IconsService) { }

  ngOnInit() {
    this.iconsService.getIcons().subscribe(data => {
      this.icons = data;
    });
  }
}

<div *ngFor="let icon of icons">
  <svg [attr.name]="icon.name" [attr.color]="icon.color">
    <use [attr.xlink:href]="icon.path"></use>
  </svg>
</div>