Как использовать пользовательские иконки SVG в Angular Material
Введение
Библиотека материалов Angular предлагает набор компонентов Angular, оформленных в стиле Material Design. Одним из таких компонентов является компонент
. Существует широкий выбор готовых иконок для материалов. Но что, если мы хотим отображать некоторые пользовательские значки, оставаясь при этом в соответствии со стилем Material Design? Давайте узнаем, как использовать наши собственные иконки SVG в компонентах Angular Material.
В этом руководстве вы будете использовать компонент
для использования стандартного шрифта Material Icons. Затем вы будете использовать компонент
для поддержки пользовательского значка SVG.
Полный рабочий код можно найти в этом репозитории GitHub.
Предпосылки
Для выполнения этого урока вам понадобятся:
- Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
Этот пост предполагает, что у вас есть базовые знания Angular v4.2+.
Это руководство изначально было написано с использованием Angular v5.2+ и Angular Material v5.2.4.
Это руководство было проверено с помощью Angular v10.0.5 и Angular Material v10.1.1.
Вы можете обратиться к этому сообщению, если вы только начинаете работать с Angular Material.
Шаг 1 — Создание проекта Angular и установка зависимостей
Сначала откройте терминал и создайте новый каталог проекта:
- mkdir angular-material-custom-svg
Далее перейдите в новый каталог:
- cd angular-material-custom-svg
Затем используйте npm
для установки Angular CLI в качестве devDependency
:
- npm install @angular/cli@10.0.4 --save-dev
Теперь вы можете использовать Angular CLI для создания нового проекта Angular, а также установить некоторые параметры для нужд этого руководства:
- ng new angular-material-custom-svg --directory=. --skipTests=true --routing=false --style=css
Это дает вам новый проект Angular в текущем каталоге. Давайте установим Angular Material и его зависимости с помощью следующей команды:
- npm install @angular/material@10.1.1 @angular/cdk@10.1.1 --save
На этом настройка учебного проекта завершена. Теперь мы можем продолжить использование значков материалов в нашем проекте.
Шаг 2 — Использование с иконочными шрифтами
Чтобы использовать значки материалов по умолчанию, вам необходимо сначала импортировать их в глобальную таблицу стилей. Для этого откройте файл styles.css
(сгенерированный Angular CLI):
- nano src/styles.css
Замените содержимое файла следующим оператором import
:
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
Далее вам нужно будет импортировать MatIconModule
. Откройте файл app.module.ts
:
- nano src/app.module.ts
Затем добавьте import
для MatIconModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
И добавьте его в массив модуля imports
:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
Теперь вы можете использовать встроенные значки материалов с компонентом
. Если вы добавите текстовое имя для значка, он отобразит соответствующий глиф значка.
В нашем уроке мы добавим значок настроение
(он напоминает символ улыбающегося лица):
На веб-сайте Material Design есть полный список значков материалов, которые вы можете использовать напрямую.
Откройте файл app.component.html
:
- nano src/app/app.component.html
Замените содержимое файла следующей строкой кода:
<mat-icon>mood</mat-icon>
Давайте посмотрим, что у нас есть на данный момент! Запустите приложение:
- ng serve
Просмотрите приложение в веб-браузере (localhost:4200
), и вы увидите значок mood
.
На этом завершается использование
для отображения иконочных шрифтов. Мы можем продолжить использовать
для отображения SVG.
Шаг 3 — Использование с SVG
Давайте добавим в наш проект собственный значок единорог
.
Примечание. Можно приобрести значки SVG единорога в The Noun Project. Бесплатное базовое использование должно указывать создателя значка в соответствии с требованиями лицензии.
Сохраните значок как unicorn_icon.svg
в папке src/assets
вашего проекта.
Чтобы использовать наш собственный значок единорога с тегом компонента
, нам нужно импортировать HttpClientModule
.
Откройте файл app.module.ts
:
- nano src/app/app.module.ts
Затем добавьте import
для HttpClientModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";
И добавьте его в массив модуля imports
:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatIconModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
Теперь мы можем зарегистрировать наш пользовательский значок единорог
с помощью службы MatIconRegistry
, предоставляемой Angular Material.
Откройте app.component.ts
:
- nano src/app/app.component.ts
Затем добавьте import
для MatIconRegistry
:
import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
И добавляем инъекцию сервиса в компонент:
export class AppComponent{
constructor(private matIconRegistry: MatIconRegistry){
// ...
}
}
Добавьте метод addSvgIcon
в метод constructor
компонента:
export class AppComponent{
constructor(private matIconRegistry: MatIconRegistry){
this.matIconRegistry.addSvgIcon(
`icon_label`,
`path_to_custom_icon.svg`
);
}
}
Метод addSvgIcon
регистрирует нашу иконку, принимая два аргумента.
Первый аргумент — это метка значка, имеющая тип string
.
Второй аргумент — это относительный URL-адрес, указывающий на расположение файла значка.
Эта строка пути URL имеет тип SafeResourceUrl
. Чтобы преобразовать строку пути URL в SafeResourceUrl
, мы можем использовать DomSanitizer
, предоставляемый Angular.
Затем добавьте import
для DomSanitizer
:
import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";
И добавляем инъекцию сервиса в компонент:
export class AppComponent{
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
){
this.matIconRegistry.addSvgIcon(
`icon_label`,
`path_to_custom_icon.svg`
);
}
}
Учитывая строку относительного пути URL, метод bypassSecurityTrustResourceUrl
в DomSanitizer
вернет безопасный URL-адрес ресурса, который требуется для метода addSvgIcon
.
Теперь вы можете заменить icon_label
пользовательской меткой единорог
. И path_to_custom_icon.svg
с пользовательским значком unicorn_icon.svg
.
Обновим строки в addSvgIcon
:
export class AppComponent{
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
){
this.matIconRegistry.addSvgIcon(
"unicorn",
this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/unicorn_icon.svg")
);
}
}
Теперь пользовательский значок единорог
правильно зарегистрирован в службе MatIconRegistry
.
Чтобы отобразить пользовательский значок, вам необходимо обновить шаблон компонента. Откройте app.component.html
:
- nano src/app/app.component.html
И передайте метку значка во входное свойство svgIcon
:
<mat-icon svgIcon="unicorn"></mat-icon>
Давайте посмотрим, что у вас есть до сих пор! Запустите приложение:
- ng serve
Просмотрите приложение в веб-браузере (localhost:4200
), и вы увидите, что пользовательский значок отображается в стиле Material.
Теперь вы можете отображать полный набор пользовательских значков в своих приложениях с помощью стилей Material.
Чтобы сделать код чище и удобнее в сопровождении, мы можем провести рефакторинг кода, переместив MatIconRegistry
в сервисный класс.
Заключение
В этом руководстве вы завершили начальное изучение использования компонента Angular Material
со шрифтом Material Icons и пользовательскими SVG. Это позволяет поддерживать последовательное соблюдение стилей Material Design во всем приложении.
Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.
Если вы хотите узнать больше о Material Design, ознакомьтесь с официальной документацией.