什么是角材质图标？

Angular Material是由 Google 开发的 UI 组件库，以便 Angular 开发人员可以以结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以极大地提高最终用户的用户体验，从而为我们的应用程序赢得人气。该库包含现代即用型元素，可以直接使用最少或无需额外代码。

是一个图标容器，可以更轻松地在 Angular 应用程序中使用基于矢量的图标。 Angular Material Icons 是一组预建的图标，可以很容易地导入到应用程序中。除了基于位图的格式，即 png、jpg 等，该指令可以同时支持图标字体和 SVG 图标。

语法：

 Icon Name 

安装语法：

基本的先决条件是我们必须在系统上安装 Angular CLI 才能添加和配置 Angular 材质库。满足所需条件后，我们可以在 Angular CLI 上键入以下命令：

ng add @angular/material

有关详细的安装过程，请参阅将 Angular 材质组件添加到 Angular 应用程序一文。

添加图标组件：

要使用 Icon 组件，我们需要将其导入到 module.ts 文件中。

import {MatIconModule} from '@angular/material/icon';

同样，为了在 Angular 应用程序中使用 SVG，我们需要将其导入到 module.ts 文件中。

import { HttpClientModule } from '@angular/common/http';

然后，我们需要将这些组件添加到我们的导入数组中。在此之后，我们可以在我们的代码中使用它。

项目结构：

安装成功后，项目结构如下图所示：

项目结构

示例 1：以下示例说明了 Angular 材质图标的实现。

app.component.html

GeeksforGeeks
Angular Material Icons
Rounded Shaped Icons

   home 
   settings 
   touch_app 

Outlined Shaped Icons

   account_circle 
   delete 
   thumb_up 

Filled Shaped Icons

   help 
   question_answer 
   history 

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { MatIconModule } from '@angular/material/icon';
  
@NgModule({
  imports: [BrowserModule, FormsModule, MatIconModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出：

角材质图标

示例 2 ：此示例说明了使用 SVG 图标的 Angular Material Icons。

app.component.html

GeeksforGeeks
Angular Material Icons
SVG Icons
Search

app.component.ts

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { MatIconRegistry } from "@angular/material/icon";
  
const searchIcon = `
`;
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral(
      "search",
      sanitizer.bypassSecurityTrustHtml(searchIcon)
    );
  }
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";
  
@NgModule({
  imports: 
      [BrowserModule, 
     FormsModule, 
     MatIconModule, 
     HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出：

角材质图标

参考： https://material.angular.io/components/icon/overview