Lista de todos los iconos de tapete en Angular

1. Iconos de diseño de materiales DX en Angular
2. Iconos de material angular proporcionados por Google

Presentaremos sitios web donde podemos encontrar todos los íconos de tapete en Angular y métodos para usar esos íconos de tapete en proyectos de Angular.

Iconos de diseño de materiales DX en Angular

Íconos de diseño de materiales DX es una ~ bifurcación de los íconos de diseño de materiales de Google donde puedes encontrar más de 900 íconos de materiales. Este proyecto se creó para solucionar problemas relacionados con la experiencia de desarrollo.

Hay dos formas de instalar iconos de material design en su proyecto.

Para instalar usando npm:

npm install material-design-icons-iconfont --save

Para incluir o @importar el archivo CSS precompilado:

<link href=".../material-design-icons.css" rel="stylesheet">

Uso

Con scss, puede importar fuentes y variables en su proyecto.

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import '~material-design-icons-iconfont/src/material-design-icons';

Clases de personalización

Podemos personalizar nuestras clases y acceder a la variable de material con Sass mixins.

.my-home {
  @include material-icon('home');
}
# or
.my-home:before {
  content: material-icons-content('home');
}

Puede encontrar una lista de iconos aquí.

Iconos de material angular proporcionados por Google

Los íconos del sistema de diseño de materiales de Google son fáciles de usar para cualquier proyecto, y hay más de 900 íconos de materiales. El selector <mat-icon> muestra los iconos de material en Angular. <mat-icon> es parte de un módulo de material Angular llamado MatIconModule.

Podemos utilizar la ligadura de fuente como icono colocando el texto de ligadura en el componente <mat-icon>.

Ejemplo:

<mat-icon>home</mat-icon>

Tenemos que importar MatIconModule desde módulos de material Angular.

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

Puede encontrar una lista de iconos aquí.