Angular svg в качестве шаблона для компонента, отображаемого в виде текста

Question

В настоящее время я пытаюсь отобразить значок SVG с помощью компонента Angular, подобного этому

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

@Component({
    selector: 'app-profile-icon',
    templateUrl: './profile-icon.svg',
    styleUrls: ['./profile-icon.component.scss'],
})
export class ProfleIconComponent {
}

Я вызываю этот элемент в файле html. Этот компонент создан, но без содержания SVG. Просто путь svg со случайным текстом.

Я пропустил какую-то конфигурацию Angular? Потому что он работает нормально, если я написал так без компонента или просто скопировал и вставил содержимое SVG в шаблон html.

<img src='./profile-icon.svg'>

Большое спасибо.

Answer 1

Добавьте папку ресурсов в вашу angular. json.

"assets": [
    "src/assets"
 ],

Затем получите доступ к значку SVG в шаблоне HTML, как показано ниже -

<img src="/assets/profile-icon.svg">