¿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 variedad de variantes de diseño. Los símbolos están disponibles en tres estilos y cuatro ejes de fuentes variables ajustables (relleno, peso, grado y tamaño óptico). Consulta el conjunto completo de símbolos de Material en la biblioteca de símbolos de Material.
Eje FILL
Rellenar te permite modificar el estilo predeterminado del ícono. Un solo ícono puede renderizar estados completos y sin completar.
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 completamente completado. Junto con el eje de ponderación, el relleno también afecta el aspecto del ícono.
Eje wght
La ponderación define el grosor del trazo del símbolo, con un rango de ponderaciones entre delgado (100) y negrita (700). El peso también puede afectar el tamaño general del símbolo.
Eje GRAD
El peso y la calificación afectan el grosor de los símbolos. Los ajustes para calificar son más detallados que los ajustes del 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 armónico. Por ejemplo, si la fuente de texto tiene un valor de grado -25, los símbolos pueden coincidir con un valor adecuado, por ejemplo, -25.
Puedes usar calificaciones para diferentes necesidades:
Énfasis bajo (p.ej., -25 grados): Para reducir el reflejo de un símbolo claro en un fondo oscuro, usa un grado bajo.
Enfatización alta (p.ej., 200 grados): Para destacar un símbolo, aumenta la calificación positiva.
Eje opsz
Los tamaños ópticos varían entre 20 dp y 48 dp.
Para que la imagen se vea igual en diferentes tamaños, el peso del trazo (grosor) cambia a medida que se ajusta el tamaño del ícono. El tamaño óptico ofrece una manera de ajustar automáticamente el peso del trazo cuando aumenta o disminuye el tamaño del símbolo.
Cómo obtener 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 desarrolladores en sus apps como para diseñadores en sus modelos o prototipos.
Licencias
Los símbolos de Material están disponibles en la versión 2.0 de la licencia Apache.
Navegación y descarga de í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 adecuadas para iOS, Android y la Web, 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
Uso en la Web
La fuente de símbolos de Material es la forma más fácil de incorporar símbolos de Material en 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 sencilla de configurar las fuentes de íconos para usarlas en cualquier página web es mediante Google Fonts. Incluye esta sola línea de código 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 peso a 400, tamaño óptico a 48, grado en 0 y relleno (también 0).
Usa la API de Fonts CSS para configurar diferentes valores de ejes. Observa los siguientes ejemplos:
Fuente variable con Google Fonts
Si quieres animar íconos mediante CSS o quieres controlar mejor las funciones de íconos, usa la fuente de variable de símbolos de Google. Con los rangos, en el formato number..number, podemos cargar toda la fuente de variable. Consulta el artículo Compatibilidad con fuentes variables de Can I Use para comprender si tus usuarios serán capaces de cargar la fuente de variable. Lo más probable es que sean compatibles. Estos son algunos ejemplos:
o bien animarlos.
Cómo alojar por su cuenta la fuente
Aloja la fuente del ícono en una ubicación que controles para decidir cuándo actualizar el elemento. 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');
}
A fin de representar la fuente correctamente, declara las reglas de CSS para la renderización del ícono. Por lo general, estas reglas se forman como parte de la hoja de estilo de la API de Google Fonts, pero se deberán incluir de forma manual en los proyectos cuando se alojen por tu cuenta:
.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 función tipográfica llamada ligaduras, que permite renderizar un glifo de ícono mediante su nombre textual. El navegador web reemplaza automáticamente la ligamento de texto con el vector de ícono y proporciona un código más legible que la referencia de caracteres numéricos equivalentes. Por ejemplo, en tu HTML, tendrás arrow_forward para representar un ícono, en lugar de .
Esta función es compatible con la mayoría de los navegadores actualizados en computadoras de escritorio y dispositivos móviles. Consulta ¿Puedo usar las ligaduras?
Si necesitas admitir navegadores que no son compatibles con las ligaduras, especifica los íconos mediante referencias numéricas de caracteres (también conocidas como puntos de código), como se muestra en el siguiente ejemplo:
Selecciona los íconos y abre el panel de fuentes de íconos para buscar los nombres de los íconos y los puntos de código en la biblioteca de símbolos de Material. Cada fuente de íconos tiene un índice de puntos de código en el repositorio de Git de Google Fonts, en el que se muestra el conjunto completo de nombres y códigos de caracteres.
Cómo aplicar estilos a íconos en Material Design
Estos íconos se diseñaron para cumplir con 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 nuestros tamaños, colores y estados de actividad recomendados.
Uso en Android
En la biblioteca de símbolos de Material, todos los íconos están en formato de interfaz dibujable en vector. Para obtener más información, consulta la documentación de Android Vector Asset Studio.
Uso en iOS
Los íconos también están disponibles en formato de símbolos de Apple. Para obtener más información sobre ellos, consulta la descripción general oficial de los símbolos de Apple y la guía de uso.
Uso en Flutter
Se planea la compatibilidad de Flutter con símbolos de Material. Esté atento a las actualizaciones.