Пример значков материалов Angular 9 для начинающих

Библиотека Angular Material имеет широкий спектр компонентов, которые мы можем использовать. Один из таких компонентов — . Компонент упрощает использование векторных значков в вашем приложении 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.

Служба для регистрации и отображения значков, используемых компонентом .

  1. Регистрирует URL-адреса значков по пространству имен и имени.
  2. Регистрирует URL-адреса набора значков по пространству имен.
  3. Регистрирует псевдонимы для классов CSS для использования со шрифтами значков.
  4. Загружает значки из 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

Угловая загрузка файла

Оцените статью
nanomode.ru
Добавить комментарий