¿Qué son los iconos de materiales angulares?

Angular Material es una biblioteca de componentes de interfaz de usuario desarrollada por Google para que los desarrolladores de Angular puedan desarrollar aplicaciones modernas de una manera estructurada y receptiva. Al hacer uso de esta biblioteca, podemos aumentar en gran medida la experiencia de usuario de un usuario final, ganando así popularidad para nuestra aplicación. Esta biblioteca contiene elementos modernos listos para usar que se pueden usar directamente con un mínimo de código adicional o sin él.

<mat-icon> es un contenedor de iconos que facilita el uso de iconos basados ​​en vectores en aplicaciones de Angular . Los íconos de materiales angulares son un conjunto de íconos prediseñados que se pueden importar fácilmente a la aplicación. A excepción de los formatos basados ​​en mapas de bits, es decir, png, jpg, etc., esta directiva puede admitir fuentes de iconos e iconos SVG.

Sintaxis :

<mat-icon> Icon Name </mat-icon>

Sintaxis de instalación:

El requisito previo básico es que debemos tener Angular CLI instalado en el sistema para poder agregar y configurar la biblioteca de materiales de Angular. Después de cumplir con la condición requerida, podemos escribir el siguiente comando en Angular CLI:

ng add @angular/material

Consulte el artículo Adición de un componente de material angular a una aplicación angular para conocer el procedimiento de instalación detallado.

Agregar el componente de icono:

Para usar el componente Icon, debemos importarlo al archivo module.ts. 

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

Del mismo modo, para usar el SVG en la aplicación Angular, debemos importarlo al archivo module.ts.

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

Luego, debemos agregar estos componentes a nuestra array de importaciones . Después de esto, podemos usarlo en nuestro código.

Estructura del proyecto:

Después de una instalación exitosa, la estructura del proyecto se verá como la siguiente imagen:

Estructura del proyecto

Ejemplo 1: El siguiente ejemplo ilustra la implementación de los iconos de material angular.

<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>
</mat-icon>
<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>
</mat-icon>
<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>
</mat-icon>

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

Producción:

Iconos de materiales angulares

Ejemplo 2 : este ejemplo ilustra los íconos de material angular donde se usan los íconos SVG.

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

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

Producción:

Iconos de materiales angulares

Referencia: https://material.angular.io/components/icon/overview