material icons

iconos-materiales

Las últimas fuentes de íconos y CSS para íconos de diseño de materiales autohospedados.

Este paquete se actualiza automáticamente, por lo que siempre tendrá los íconos más recientes de Google.

Para símbolos de materiales, consulte material-symbols

Para SVG, consulte @material-design-icons/svg

• Instalación
• Uso
• Iconos disponibles

Instalación

Instale la última versión usando:

npm install material-icons@latest

Nota: Si está actualizando de 0.x a 1.x, consulte las notas de la versión 1.0.0.

Uso

Importar en JS (ejemplo: src/index.js en Create React App, src/main.js en Vue CLI):

 import 'material-icons/iconfont/material-icons.css' ;

o importar en CSS (ejemplo: src/styles.css en Angular CLI):

 @import 'material-icons/iconfont/material-icons.css' ;

o importar en HTML:

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

Para mostrar un icono, utilice uno de los siguientes:

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

Reducir el tamaño de construcción

El material-icons.css predeterminado incluye CSS para todas las fuentes. Esto puede hacer que las herramientas de compilación, como webpack, copie todas las fuentes al directorio de compilación, incluso si no las está utilizando todas. Para reducir el tamaño de la compilación, importe solo los estilos que necesite. Por ejemplo, si solo necesita íconos rellenos y delineados, importe filled.css y outlined.css en lugar del material-icons.css predeterminado:

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

Mostrar todo

Iconos	CSS	Hablar con descaro a
Completado	lleno.css	lleno.scss
delineado	delineado.css	delineado.scss
Redondo	ronda.css	redondo.scss
Afilado	Sharp.css	Sharp.scss
dos tonos	dos tonos.css	dos tonos.scss

Usando descaro

Importar en Sass (ejemplo: src/styles.scss en Angular CLI):

 @import ' material-icons/iconfont/material-icons.scss ' ;

Variables Sass disponibles:

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

Si recibe errores con el paquete web o Vue CLI, agregue esta línea antes de importar:

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Usando mat-icon angular

Para mostrar un icono, utilice uno de los siguientes:

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

Usando clases CSS

Alternativamente, puedes usar clases CSS en lugar de ligaduras para mostrar íconos. Más información

Iconos disponibles

Ver demostración.

Licencia

Los iconos de Material Design son creados por Google.

Hemos puesto estos íconos a su disposición para que los incorpore a sus productos bajo la licencia Apache versión 2.0. Siéntase libre de mezclar y volver a compartir estos íconos y documentación en sus productos. Nos encantaría la atribución en la pantalla Acerca de de tu aplicación, pero no es obligatoria.