Как вставить иконки социальных сетей, используя Angular Material, например сайт Angular.io/resources?

Question

Я установил Angular Material и смог использовать значки, просто импортировав модуль материала и используя элемент mat-icon:

<mat-icon>mood</mat-icon>

Однако я бы хотел использовать такие социальные иконки, какодин на сайте angular.io / resources .

Когда я проверяю элемент, кажется, что он рисует svg, используя значение атрибута d элемента path, однако я не уверен, какСообщество Angular обычно получает эти значения данных. Существует ли стандартное использование ресурсов разработчиками, а не утомительная задача их извлечения самостоятельно? В данный момент я просто прибегаю к копированию и вставке значения d lol, однако мне интересно, есть ли более практичный подход, который используют разработчики.

Answer 1

Все значки материалов имеют открытый исходный код.

1. Перейдите на сайт значков материалов.
2. Нажмите на значок.
3. Нажмите на ссылку для скачивания SVGв левом нижнем углу страницы.

Или нажмите на ссылку "git repository". Где вы можете просмотреть исходный репозиторий и загрузить некоторые или все значки.

Answer 2

Создайте svg-файл (inkscape, illustrator) или загрузите его и зарегистрируйте в сервисе следующим образом:

@Injectable({providedIn: 'root'})
export class MaterialIconsService {
    constructor(private iconRegistry: MatIconRegistry,
                private sanitizer: DomSanitizer) {
        this.iconRegistry.addSvgIcon('my-icon', this.sanitizer.bypassSecurityTrustResourceUrl('assets/path/my-icon.svg');
    }
}

Затем вы можете использовать его в своем html

<mat-icon svgIcon="my-icon"></mat-icon>

Больше информации здесь: https://material.angular.io/components/icon/api#MatIconRegistry