Estilos Íconos
Íconos
Material Symbols es una familia de íconos variables: un mismo ícono cambia su relleno, grosor, grado y tamaño óptico con una sola fuente. Hay tres estilos: delineado, redondeado y anguloso.
school
Los 4 ejes variables
| Eje | Rango | Para qué sirve |
|---|---|---|
| FILL (relleno) | 0 a 1 | Vacío o lleno. Útil para mostrar un estado activo (favorito marcado). |
| wght (grosor) | 100 a 700 | Que el ícono combine con el grosor del texto que lo acompaña. |
| GRAD (grado) | -25 a 200 | Ajuste fino del grosor sin cambiar el tamaño; -25 para fondos oscuros, 200 para dar énfasis. |
| opsz (tamaño óptico) | 20 a 48 | Ajusta el trazo para que se vea bien pequeño o grande. |
Tres estilos
homefavoritesettingsschoolshare
Delineado (Outlined)Trazo limpio. El más usado.homefavoritesettingsschoolshare
Redondeado (Rounded)Esquinas suaves, más amigable.homefavoritesettingsschoolshare
Anguloso (Sharp)Esquinas rectas, más técnico.Usa un solo estilo en todo el sitio. Mezclarlos se ve descuidado.
Biblioteca
Toca un ícono para copiar su código. Escribe para filtrar.
Tamaños
school20 dp
school24 dp
school40 dp
school48 dp
El tamaño estándar es 24 dp, con un área táctil de 48 dp cuando el ícono es un botón.
En HTML y CSS
<!-- 1. Cargar la fuente (en el <head>) -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<!-- 2. Usar el ícono por su nombre -->
<span class="material-symbols-outlined">school</span>
<style>
.material-symbols-outlined {
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
</style>Consejo: agrega &icon_names=home,school,search al enlace para descargar solo los íconos que usas y hacer la página mucho más liviana.
Accesibilidad
Decorativo
Si acompaña un texto, ocúltalo al lector: aria-hidden="true".
Solo ícono
Si es un botón sin texto, ponle aria-label al botón.
Contraste
Los íconos que transmiten información necesitan contraste de 3:1.