来自文件的SVG不会加载到Angular App中

Question

我在Angular应用中使用了一些svg，但尽管组件已正确加载（通过检查器检查），但它们似乎并未加载。

首先，我有一个名为SaltyWebFont.svg 的 svg文件，其中包含多个 svg图像。该位置在assets / icons / SaltyWebFont.svg中，我认为根目录不是问题，因为该应用程序可以加载相同目录下包含的图像。可通过其特定组件 svg-icon.component.html 访问该文件：

<svg>
  <use attr.xlink:href="assets/icons/SaltyWebFont.svg#{{icon}}"></use>
</svg>

链接到该视图的ts文件为 svg-icon.component.ts ：

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

@Component({
  selector: 'salty-svg-icon',
  templateUrl: './svg-icon.component.html',
  styleUrls: ['./svg-icon.component.sass']
})
export class SvgIconComponent {
  @Input() icon: string;
}

其中哪个导入了 home.module.ts ，我想在其中显示svgs的组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { SvgIconComponent } from '../shared/components/svg-icon/svg-icon.component';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [
    HomeComponent,
    SvgIconComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class HomeModule { }

和 home.component.ts ：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

和 home.component.html ：

<salty-svg-icon icon="BAN001" class="icon"></salty-svg-icon>

我找不到在头部或身体下方的html dom中加载的svg，但是我可以从组件中正确找到标签：

<salty-svg-icon _ngcontent-ewr-c4="" class="icon" icon="BAN001" _nghost-ewr-c5="" ng-reflect-icon="BAN001"> 
 <svg _ngcontent-ewr-c5=""><use _ngcontent-ewr-c5="" xlink:href="assets/icons/SaltyWebFont.svg#BAN001"></use></svg>
</salty-svg-icon>

我想念什么？