¿Cómo usar mat-icon en angular?

Para incluir íconos en su página web, puede usar la directiva mat-icon . Anteriormente se conocía como md-icon. Es mejor usar mat-icon ya que sirven íconos SVG, es decir, íconos basados ​​en vectores que se adaptan a cualquier resolución y dimensión, por otro lado, los íconos basados ​​en ráster tienen un patrón fijo de puntos con valores específicos y, si cambios de resolución.

Acercarse:

  • En primer lugar, debemos cargar la biblioteca de fuentes en su archivo HTML utilizando la siguiente sintaxis:

    <enlace href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”hoja de estilo”>

  •  Ahora importe MatIconModule en el archivo ngmodule.ts usando este comando:

    import {MatIconModule} from '@angular/material/icon';
  • Utilice el siguiente comando para mostrar un icono:

    <mat-icon>icon-name</mat-icon>

Puede cambiar el color de los iconos según el requisito:

  1. Primario .
  2. Acento.
  3. Advertir.

Estos íconos pueden usarse como botones o pueden transmitir algún mensaje, como el tipo de campo de formulario, el estado, etc.

Ejemplo:

Usando mat-icon vamos a crear tres botones diferentes.

En su archivo index.html, cargue la biblioteca de fuentes.

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial</title>
    
  <!--font library is loaded prior to using mat-icons-->
    
  <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons&display=block" 
        rel="stylesheet">
  
</head>
<body>
  <app-child></app-child>
</body>
</html>

Ahora usa mat-icon como botones.

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-child',
  template: `
  
  <button ><mat-icon color = "primary">check</mat-icon></button>
  <button ><mat-icon color = "accent">check</mat-icon></button>
  <button ><mat-icon color = "warn">check</mat-icon></button>
  
  `,
  styleUrls: []
})
export class childComponent {
  
}

Producción:

Publicación traducida automáticamente

Artículo escrito por vaibhav19verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *