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:
- Primario .
- Acento.
- 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