SVG из файла не загружаются в приложение Angular

Question

Я использую некоторые svgs в своем приложении Angular, но они, кажется, не загружаются, несмотря на то, что компонент загружается правильно (проверено через инспектор).

Прежде всего, у меня есть * Файл 1003 * svg называется SaltyWebFont.svg , содержащий несколько изображений SVG. Расположение находится в assets / icons / SaltyWebFont.svg, я думаю, что каталог root не является проблемой, поскольку приложение может загружать изображения, содержащиеся в тех же каталогах. Этот файл доступен через его специфицированный c компонент 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>

I я не могу найти svg, загруженный в html dom под головой или телом, но я могу найти тег из компонента, который был загружен правильно:

<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>

Чего мне не хватает?