什么是Angular Material图标

Angular Material是一个由谷歌开发的UI组件库，以便Angular开发人员能够以一种结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以大大增加终端用户的用户体验，从而为我们的应用程序赢得人气。这个库包含了现代的即用元素，可以直接使用，只需最少或没有额外的代码。

<mat-icon>是一个图标的容器，使得在Angular应用程序中使用基于矢量的图标更加容易。Angular Material Icons是一组预制的图标，可以很容易地导入到应用程序中。除了基于位图的格式，即，png，jpg等，这个指令可以支持图标字体和SVG图标。

语法 :

<mat-icon> Icon Name

Installation 语法:

基本的前提条件是，我们必须在系统上安装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';

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

Project Structure:

安装成功后，项目结构将看起来像下面的图片。

什么是Angular Material图标？

Project Structure

例子1：下面的例子说明了Angular Material Icons的实现。

<h2>GeeksforGeeks</h2>
<h4>Angular Material Icons</h4>
<h5>Rounded Shaped Icons</h5>
<mat-icon>
  <span class="material-icons-round"> home </span>
  <span class="material-icons-round"> settings </span>
  <span class="material-icons-round"> touch_app </span>

<h5>Outlined Shaped Icons</h5>
<mat-icon>
  <span class="material-icons-outlined"> account_circle </span>
  <span class="material-icons-outlined"> delete </span>
  <span class="material-icons-outlined"> thumb_up </span>

<h5>Filled Shaped Icons</h5>
<mat-icon>
  <span class="material-icons"> help </span>
  <span class="material-icons"> question_answer </span>
  <span class="material-icons"> history </span>

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

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 {}

输出:

什么是Angular Material图标？

Angular Material图标

实例2 。这个例子说明了Angular Material Icons，其中使用了SVG图标。

<h2>GeeksforGeeks</h2>
<h4>Angular Material Icons</h4>
<h5>SVG Icons</h5>
<label>Search</label>
<mat-icon svgIcon="search">

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { MatIconRegistry } from "@angular/material/icon";
  
const searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d=
"M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,
1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,
6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,
0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,
0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,
5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,
16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"/>
  </svg>
`;
  
@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)
    );
  }
}

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 {}