Библиотека Angular Material имеет широкий спектр компонентов, которые мы можем использовать. Один из таких компонентов — . Компонент упрощает использование векторных значков в вашем приложении angular.
- Значки материалов Angular
- Как использовать значки материалов в Angular
- Шаг 1. Установите и настройте Angular Material.
- Шаг 2. Импортируйте модуль MatIconModule
- Добро пожаловать в приложение Angular Material mood
- Регистрация значков
- значки SVG
- Как использовать пользовательские значки SVG в Angular
- Рекомендуемые сообщения
Значки материалов Angular
Чтобы использовать значки материалов в Angular, используйте компонент . Директива поддерживает как шрифты значков, так и значки SVG, но не форматы на основе растровых изображений. Иконки являются необходимыми компонентами при создании современных веб-приложений, и иногда они могут разочаровывать.
Есть некоторые наборы значков, такие как Font Awesome и Material Icons, которые сделали его более доступным, всегда есть нужный значок, который все еще отсутствует.
Хорошим примером является отсутствие значков социальных сетей в значках материалов по какой-либо причине.
Если мы хотим избежать этой проблемы, вы можете использовать несколько наборов значков или смесь между набором значков и вашим собственным набором значков изображений. Это вызывает проблему непоследовательности ваших значков.
Как использовать значки материалов в Angular
В этом руководстве , мы увидим, как мы можем отобразить существующий значок материала, предоставленный библиотекой, а также посмотрим, как мы можем добавить наш значок SVG в приложение материала.
Существует обширный набор готовых значков материалов, которые мы можем легко использовать. Но что, если мы хотим отображать пользовательские значки, оставаясь в соответствии со стилем Material Design? Давайте узнаем, как использовать значки SVG в компонентах Angular Material.
Давайте начнем с установки проекта Angular и настройки библиотеки материалов в Angular.
Шаг 1. Установите и настройте Angular Material.
Введите следующую команду. Я использую Angular для этой демонстрации.
ng new angicon
Теперь перейдите в проект и установите hammerjs.
npm install --save hammerjs
Теперь установите Angular Material и Angular Animations с помощью следующей команды.
npm install --save @ angular/material @ angular/animations @ angular/ cdk
Теперь включите hammerjs в файл angular.json . Вы можете найти файл angular.json в корне проекта.
"scripts": ["./node_modules/hammerjs/hammer.min.js"]
Импортируйте предварительно созданную тему и значки материалов.
Чтобы импортировать тему, вы можете добавить следующий код в свой глобальный файл styles.css . Файл находится внутри папки src .
@import '~ @ angular/material/prebuilt-themes/indigo -pink.css '; @ import url ("https://fonts.googleapis. com/icon? family = Material + Icons ");
Теперь импортируйте BrowserAnimationsModule внутри app.module.ts файл.
//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {BrowserAnimationsModule} из ' @ angular/platform-browser/animations '; импортировать {AppComponent} из' ./app.component '; @ NgModule ({объявления: [AppComponent], импортировать: [BrowserModule, BrowserAnimationsModule], провайдеры: [], bootstrap: [AppComponent ]}) экспортный класс AppModule {}
Шаг 2. Импортируйте модуль MatIconModule
Хорошо, теперь нам нужно импортировать MatIconModule внутри файла app.module.ts .
//app.module.tsimport {MatIconModule} from '@angular /material/icon '; @ NgModule ({объявления: [AppComponent, ...], импорт: [... MatIconModule], bootstrap: [AppComponent]}) класс экспорта AppModule {}
Мы может использовать встроенные значки материалов с компонентом . Чтобы изменить файл app.component.html , как показано ниже.
Добро пожаловать в приложение Angular Material mood
Перейдите в терминал и запустите сервер разработки angular.
ng serve --open
Итак, мы успешно интегрировали значок материала Angular в демонстрационное приложение Angular.
Регистрация значков
MatIconRegistry — это служба для инъекций, которая позволяет нам связывать имена значков с URL-адресами SVG, строками HTML и определять псевдонимы для классов шрифтов CSS.
Служба для регистрации и отображения значков, используемых компонентом .
- Регистрирует URL-адреса значков по пространству имен и имени.
- Регистрирует URL-адреса набора значков по пространству имен.
- Регистрирует псевдонимы для классов CSS для использования со шрифтами значков.
- Загружает значки из U RLs и извлекает отдельные значки из наборов значков.
значки SVG
Когда компонент отображает значок SVG, он делает это путем непосредственного встраивания содержимого SVG в страницу в качестве дочернего элемента элемента, а не с помощью тега или фонового изображения div.
Как использовать пользовательские значки SVG в Angular
Мы также можем использовать пользовательские значки SVG внутри нашего приложения. Я загрузил один значок SVG для самолета. Давайте воспользуемся этим значком в нашем руководстве по Angular Material.
Теперь скопируйте этот значок в папку src >> assets .
Чтобы использовать наш собственный значок самолета с тегом компонента , нам нужно добавить HttpClientModule внутри файла app.module.ts. Вот почему импортируйте модуль внутри файла app.module.ts .
//app.module.tsimport {BrowserModule} из '@ angular/platform- browser '; импортировать {NgModule} из' @ angular/core '; импортировать {BrowserAnimationsModule} из' @ angular/platform-browser/animations '; импортировать {MatIconModule} из' @ angular/material/icon '; импортировать {HttpClientModule} из '@ angular/common/http'; импорт {AppComponent} из './app.component'; @ NgModule ({объявления: [AppComponent], импорт: [BrowserModule, BrowserAnimationsModule, MatIconModule, HttpClientModule], поставщики: [], bootstrap : [AppComponent]}) экспортный класс AppModule {}
Теперь нам нужно зарегистрировать наш собственный значок с помощью службы MatIconRegistry , предоставляемой пакетом Angular Material.
Импортируйте MatIconRegistry и вставьте службу в свой компонент. В методе конструктора компонента.
addSvgIcon регистрирует наш значок, принимая два аргумента, первый из которых — это метка значка, которая имеет строковый тип.
Второй аргумент — это относительный URL-путь, указывающий на расположение значка. Это тип SafeResourceUrl .
Если нам нужно проанализировать строку пути URL в SafeResourceUrl, мы можем использовать модуль DomSanitizer, предоставляемый Angular.
Импортируйте DomSanitizer и вставьте его в свой компонент. Итак, наш окончательный код будет выглядеть так внутри файла app.component.ts .
//app.component.tsimport {Component} from '@angular /core '; импортировать {MatIconRegistry} из' @ angular/material/icon '; импортировать {DomSanitizer} из' @ angular/platform-browser '; @ Component ({selector:' app-root ', templateUrl:' ./app .component.html ', styleUrls: [' ./app.component.css'pting})export class AppComponent {title = 'angicon'; конструктор (частный matIconRegistry: MatIconRegistry, частный domSanitizer: DomSanitizer) {this.matIconRegistry.addSvgIcon ('самолет', this.domSanitizer.bypassSecurityTrustResourceUrl ('../assets/airplane.svg')); }}
Итак, здесь мы успешно зарегистрировали пользовательский значок SVG в нашем приложении Angular. Последний шаг — использовать значок airplane.svg внутри файла app.component.html .
Сохраните файл и перейдите на http://localhost: 4200/, и вы увидите отобразятся пять значков SVG . Вот как вы можете импортировать пользовательские значки svg в пример angular.
Наконец, пример значков материалов Angular завершен. Вы можете найти больше об Angular Material Icons здесь. Я разместил код на Github; пожалуйста, проверьте и это.
Код Github
Рекомендуемые сообщения
Пример материала Angular
Angular Modal
Пример таблицы материалов Angular
Angular CRUD
Угловая загрузка файла
