¿Qué son los símbolos de Material?
Los símbolos de Material son nuestros íconos más recientes y consolidan más de 2,500 glifos en un solo archivo de fuente con una amplia gama de variantes de diseño. Los símbolos están disponibles en tres estilos y cuatro ejes de fuente variables ajustables (relleno, grosor, grado y tamaño óptico). Consulta el conjunto completo de símbolos de Material en la Biblioteca de símbolos de Material.
FILL eje
El relleno te permite modificar el estilo de ícono predeterminado. Un solo ícono puede renderizar estados sin completar y relleno.
Para transmitir una transición de estado, usa el eje de relleno para la animación o interacción. Los valores son 0 para el valor predeterminado o 1 para el relleno completo. Junto con el eje de peso, el relleno también afecta el aspecto del ícono.
wght eje
El peso define el grosor del trazo del símbolo, con un rango de grosores entre fino (100) y negrita (700). El peso también puede afectar el tamaño general del símbolo.
GRAD eje
El peso y la grado afectan el grosor de un símbolo. Los ajustes de calificación son más detallados que los ajustes de peso y tienen un pequeño impacto en el tamaño del símbolo.
La calificación también está disponible en algunas fuentes de texto. Puedes hacer coincidir los niveles de grado entre el texto y los símbolos para lograr un efecto visual armonioso. Por ejemplo, si la fuente de texto tiene un valor de calificación de -25, los símbolos pueden hacerlo coincidir con un valor adecuado, por ejemplo, -25.
Puedes usar la calificación según las diferentes necesidades:
Énfasis bajo (p.ej., grado -25): Usa un grado bajo para reducir el reflejo de un símbolo de luz en un fondo oscuro.
Énfasis alto (p.ej., calificación 200): Para destacar un símbolo, aumenta la calificación positiva.
opsz eje
Los tamaños ópticos varían entre 20 dp y 48 dp.
Para que la imagen tenga el mismo tamaño en diferentes tamaños, el grosor del trazo (espesor) cambia a medida que se escala el tamaño del ícono. El tamaño óptico ofrece una manera de ajustar automáticamente el grosor del trazo cuando aumentas o disminuyes el tamaño del símbolo.
Obtén símbolos de Material
Los símbolos de Material están disponibles en varios formatos y son adecuados para diferentes tipos de proyectos y plataformas, tanto para los desarrolladores en sus apps como para los diseñadores de sus maquetas o prototipos.
Licencias
Los símbolos de Material están disponibles en la versión 2.0 de la licencia Apache.
Explorar y descargar íconos individuales
El conjunto completo de símbolos de material está disponible en la Biblioteca de símbolos de material en formato SVG o PNG. Son adecuados para la Web, iOS y Android, o bien con cualquier herramienta de diseño.
Repositorio de Git
El repositorio de Git contiene el conjunto completo de símbolos de Material en formato SVG.
$ git clone https://github.com/google/material-design-icons
Cómo usar símbolos de Material
Usar en la Web
La fuente Material Symbols es la forma más fácil de incorporar estos símbolos en los proyectos web.
Los íconos se empaquetan en una sola fuente para que los desarrolladores web puedan incorporarlos fácilmente con solo unas pocas líneas de código.
Fuente estática con Google Fonts
La forma más fácil de configurar fuentes de íconos para usar en cualquier página web es con Google Fonts. Incluye esta única línea de HTML:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
El fragmento anterior incluye la configuración predeterminada para cada eje, con el peso en 400, el tamaño óptico en 48, el grado en 0 y el relleno (también en 0).
Usa la API de Fonts CSS para configurar diferentes valores de ejes. Mira los siguientes ejemplos:
Fuente variable con Google Fonts
Si quieres animar íconos mediante CSS o deseas tener un control más preciso sobre las funciones de los íconos, usa la fuente variable Google Symbols. Si usamos rangos, en el formato number..number, podemos cargar toda la fuente de la variable. Consulta la compatibilidad con fuentes variables de Can I Use para comprender si tus usuarios podrán cargar la fuente variable, lo más probable es que lo sean. Estos son algunos ejemplos:
¡O incluso animarlos!
Alojamiento de la fuente
Aloja la fuente del ícono en una ubicación que controles para decidir cuándo actualizar el recurso. Por ejemplo, si la URL es https://example.com/material-symbols.woff, agrega la siguiente regla de CSS:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Para representar la fuente de forma correcta, declara las reglas de CSS para renderizar el ícono. Por lo general, estas reglas se entregan como parte de la hoja de estilo de la API de Google Fonts, pero deberán incluirse de forma manual en tus proyectos cuando realices el hosting tú mismo:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Cómo usar los íconos en HTML
En los ejemplos anteriores, se usa una característica tipográfica llamada ligaturas, que permite renderizar un glifo de ícono con solo usar su nombre textual. El navegador web reemplaza automáticamente la ligadura de texto por el vector de íconos y proporciona un código más legible que la referencia de caracteres numéricos equivalente. Por ejemplo, en tu código HTML tendrás arrow_forward para representar un ícono, en lugar de . Para otros íconos, usa mayúsculas y minúsculas del nombre del ícono (es decir, reemplaza los espacios por guiones bajos).
Esta función es compatible con la mayoría de los navegadores modernos, tanto en computadoras de escritorio como en dispositivos móviles. Consulta Compatibilidad con ligaduras de Can I Use para ver si tus usuarios serán capaces de procesar ligaduras, lo más probable es que puedan hacerlo.
Si necesitas compatibilidad con navegadores que no admiten ligaduras, especifica los íconos con referencias de caracteres numéricos (también conocidos como puntos de código), como en el siguiente ejemplo:
Busca los nombres de los íconos y los puntos de código en la Biblioteca de símbolos de material. Para ello, selecciona cualquier ícono y abre el panel de fuentes de íconos. Cada fuente de ícono tiene un índice de puntos de código en el repositorio de Git de Google Fonts que muestra el conjunto completo de nombres y códigos de caracteres.
Cómo aplicar diseño a íconos en Material Design
Estos íconos se diseñaron para seguir los lineamientos de Material Design y se ven mejor cuando se usan los tamaños y colores de íconos recomendados. Los siguientes estilos facilitan la aplicación de los tamaños, colores y estados de actividad recomendados.
Usar en Android
En la biblioteca de símbolos de Material, todos los íconos tienen el formato de elemento de diseño vectorial. Para obtener más información, consulta la documentación de Android Vector Asset Studio.
Usar en iOS
Los íconos también están disponibles en el formato de símbolos de Apple. Para obtener más información sobre ellos, consulta la descripción general y la guía de uso oficiales de los símbolos de Apple.
Uso en Flutter
Se planificó la compatibilidad de Flutter con símbolos de Material. Esté atento a las actualizaciones.