¿Qué son los símbolos de material?
Los símbolos de Material son nuestros íconos más recientes, que 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, grosor, grado y tamaño óptico). Consulta el conjunto completo de símbolos de material en la Biblioteca de símbolos de material.
Eje FILL
El relleno te permite modificar el estilo predeterminado del ícono. Un solo ícono puede renderizar estados rellenos y sin relleno.
Para transmitir una transición de estado, usa el eje de relleno para animación o interacción. Los valores son 0 para el valor predeterminado o 1 para el valor completamente completado. Junto con el peso el relleno también afecta el aspecto del ícono.
Eje wght
El grosor define el grosor del trazo del símbolo, con un rango de grosores entre delgado (100) y negrita (700). El grosor también puede afectar el tamaño general del símbolo.
Eje GRAD
El peso y la calificación afectan el grosor de un símbolo. Los ajustes de grado son más detallados que los ajustes de grosor 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 texto y símbolos para lograr un efecto visual armonioso. Por ejemplo, si la fuente de texto tiene un valor de grado de -25, los símbolos pueden coincidir con un valor adecuado, por ejemplo, -25.
Puedes usar la calificación para diferentes necesidades:
Énfasis bajo (p. ej., -25 grados): Para reducir el brillo de un símbolo claro sobre un fondo oscuro, usa un grado bajo.
Énfasis alto (p.ej., grado 200): para destacar un símbolo, aumenta el positivo calificación.
Eje opsz
Los tamaños visuales varían de 20 dp a 48 dp.
Para que la imagen se vea igual en diferentes tamaños, es necesario el grosor del trazo (grosor) cambia a medida que se escala el tamaño de los íconos. El tamaño óptico ofrece una forma de ajustar automáticamente el grosor del trazo cuando aumentas o disminuyes 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 maquetas o prototipos.
Licencias
Los símbolos de Material están disponibles bajo la Licencia Apache, versión 2.0.
Cómo navegar 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, Android y iOS, o con cualquier herramienta de diseño.
Repositorio de Git
El comando git repositorio 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 Material Symbols es la forma más fácil de incorporar estos símbolos 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 fuentes de íconos para usarlas en cualquier página web es a través de Google Fonts. Incluye esta única 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 weight en 400, optical size en 48, grade en 0 y fill (también 0).
Usa la API de CSS de Fonts para configurar diferentes valores de ejes. Consulta los siguientes ejemplos:
Fuente variable con Google Fonts
Si animas íconos a través de CSS o deseas tener un control más preciso sobre sus funciones, usa la fuente variable de Google Symbols. Mediante el uso de rangos, en el formato number..number,
podemos cargar toda la variable de fuente. Consulta Can I Use's Variable Fonts
asistencia
para comprender si tus usuarios podrán cargar la fuente variable, la mayoría
más probable que sean. Estos son algunos ejemplos:
O incluso animarlos.
Optimiza la fuente del ícono
Crea un subconjunto de la fuente para incluir solo los íconos relevantes para tu aplicación con el parámetro de consulta
&icon_names, usando una lista de nombres de íconos (ligaduras) separados por comas y ordenados alfabéticamente.No recomendado: Usar la configuración predeterminada carga los más de 3800 íconos. Carga útil de fuente: 295 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedRecomendado: Especifica los nombres de los íconos para cargar solo los íconos necesarios. Carga útil de fuente: 1.7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockCrea instancias de los ejes de la fuente variable para incluir solo los que usará tu aplicación. La mayoría de las aplicaciones solo necesitan unas pocas variantes de los ejes.
No se recomienda: Si falta la configuración de los ejes, se carga la fuente estática predeterminada (peso 400, tamaño óptico 24, redondeo 50, grado 0, relleno 0). Por lo general, no es necesario incluir todos los ejes de fuente variables en su totalidad, ya que aumenta la carga útil. Carga útil de la fuente: 7.9 MB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Recomendado: Se usa una combinación específica de ejes. A modo de ejemplo, el eje completo “FILL” proporciona transiciones de CSS entre estados, y “ROND” 100 es el diseño elegido. Carga útil de fuente: 2.6 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Autoalojamiento de la fuente
Aloja la fuente de íconos en una ubicación que controles para decidir cuándo actualizar el recurso. Para
ejemplo, si la URL es https://example.com/material-symbols.woff, agrega el
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 renderizar la fuente correctamente, declara las reglas de CSS para renderizar el ícono. Estos las reglas se entregan como parte de la hoja de estilo de la API de Google Fonts, pero deberá incluirse manualmente en tus proyectos cuando se aloje 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 utiliza un atributo tipográfico denominado
ligaturas
, que permite renderizar un glifo de ícono mediante su nombre textual. El navegador web reemplaza automáticamente la ligadura de texto por el vector de ícono y proporciona un código más legible que la referencia de caracteres numéricos equivalente. Para
Por ejemplo, en tu código HTML, tendrás arrow_forward para representar un ícono,
en lugar de . Para otros íconos, usa el caso de serpiente 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 en computadoras y dispositivos móviles. Consulta la sección ¿Puedo usar las ligaduras de asistencia para ver si los usuarios son capaces de procesar ligaduras. Lo más probable es que puedes hacerlo.
Si necesitas admitir 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:
Para encontrar los nombres de los íconos y los códigos de punto en la Biblioteca de símbolos de material, selecciona cualquier ícono y abre el panel de fuente de íconos. Cada fuente de íconos 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 estilos a continuación facilitan la aplicación de nuestros tamaños, colores y estados de actividad recomendados.
Usar en Android
En la Biblioteca de símbolos de Material, todos los íconos están en el formato de elementos de diseño vectoriales. Para Para obtener más información, visita Android Vector Asset Studio documentación.
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 y la guía de uso de los símbolos oficiales de Apple.
Usar en Flutter
Se planifica la compatibilidad de Flutter con símbolos de Material. No te pierdas las novedades.