Una descripción general de los íconos de material: dónde obtenerlos y cómo integrarlos a tus proyectos
¿Qué son los íconos de material?
Los íconos del sistema de Material Design son simples, modernos, amigables y, a veces, extravagantes. Cada ícono se crea según nuestros lineamientos de diseño para representar en formas simples y mínimas los conceptos universales que se usan comúnmente en una IU. Para garantizar la legibilidad y la claridad en tamaños grandes y pequeños, estos íconos se optimizaron para lograr una visualización atractiva en todas las plataformas y resoluciones de pantalla comunes.
Consulta el conjunto completo de íconos de material design en la Biblioteca de íconos de material.
Obteniendo íconos
Los íconos están disponibles en varios formatos y son adecuados para diferentes tipos de proyectos y plataformas, para desarrolladores en sus apps y para diseñadores en sus maquetas o prototipos.
Licencias
Estos íconos están disponibles para que los incorpores a tus productos en la versión 2.0 de la licencia Apache. Puedes combinar y volver a compartir estos íconos y estos documentos en tus productos. Nos encantaría incluir la atribución en la pantalla about de tu app, pero no es obligatoria.
Explorar y descargar íconos individuales
El conjunto completo de íconos de material está disponible en la biblioteca de íconos de material. Los íconos están disponibles para descargarse en SVG o PNG, formatos que son adecuados para proyectos web, de iOS y Android, o para incluirlos en cualquier herramienta de diseño.
Descargando todo
Obtén el archivo ZIP estable más reciente (~310 MB) de todos los íconos o la versión de última generación de la instancia principal.
Repositorio de Git
Los íconos de material están disponibles en el repositorio de Git, que contiene el conjunto completo de íconos, incluidos todos los formatos que ponemos a disposición.
$ git clone https://github.com/google/material-design-icons/
Fuente de íconos para la Web
La fuente del ícono de material es la forma más fácil de incorporar íconos de material en proyectos web. Empaquetamos todos los íconos de material en una sola fuente que aprovecha las capacidades de renderización tipográfica de los navegadores modernos para que los desarrolladores web puedan incorporar estos íconos fácilmente con solo unas pocas líneas de código.
Usar la fuente no solo es el método más conveniente, sino que también es eficiente y se ve muy bien:
- Más de 900 íconos, todos desde un único archivo pequeño.
- Provienen de los servidores de fuentes web de Google o pueden alojarse automáticamente.
- Compatible con todos los navegadores web modernos.
- Se usan en color, tamaño y posición completamente con CSS.
- Basado en vectores: se ven muy bien a cualquier escala, pantallas Retina y pantallas con valores bajos de DPI.
La fuente del ícono pesa solo 42 KB en su formato woff2 más pequeño y 56 KB en formato woff estándar. En comparación, los archivos SVG comprimidos con gzip suelen tener un tamaño aproximado de 62 KB, pero se puede reducir considerablemente mediante la compilación de solo los íconos que necesitas en un solo archivo SVG con objetos de símbolos.
Método de configuración 1: Uso mediante Google Fonts
La forma más sencilla de configurar fuentes de íconos para usar en cualquier página web es con Google Fonts. Lo único que debes hacer es incluir una sola línea de HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Al igual que con otras fuentes web de Google, se entregará la CSS correcta para activar la fuente "Íconos de material" específica del navegador.
Se declarará una clase de CSS adicional llamada .material-icons.
Cualquier elemento que use esta clase tendrá la CSS correcta para representar estos íconos a partir de la fuente web.
Método de configuración 2: Autohosting
Para aquellos que quieran alojar la fuente web por su cuenta, se necesita una configuración adicional.
Aloja la fuente del ícono en una ubicación, por ejemplo, https://example.com/material-icons.woff, y agrega la siguiente regla de CSS:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Además, se deberán declarar las reglas de CSS para renderizar el ícono a fin de renderizar la fuente de forma correcta. Por lo general, estas reglas se entregan como parte de la hoja de estilo de fuente web de Google, pero deberán incluirse manualmente en tus proyectos cuando alojes automáticamente la fuente:
.material-icons {
font-family: 'Material Icons';
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;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Cómo usar los íconos en HTML
Incorporar iconos a tu página web es fácil. A continuación, se incluye un pequeño ejemplo:
rostro
<span class="material-icons">face</span>
En este ejemplo, 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 realiza el reemplazo automáticamente, y este proporciona un código más legible que la referencia de caracteres numéricos equivalente.
Esta función es compatible con la mayoría de los navegadores modernos, tanto en computadoras de escritorio como en dispositivos móviles.
| Navegador | Versión compatible con ligaduras |
|---|---|
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| MobileSafari de Apple | iOS 4.2 |
| Navegador de Android | 3.0 |
Para los navegadores que no admiten ligaduras, recurre a la especificación de los iconos mediante el uso de referencias de caracteres numéricos, como en el siguiente ejemplo:
<span class="material-icons"></span>Encuentra los nombres de los íconos y los puntos de código en la biblioteca de íconos 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 nuestro repositorio de Git que muestra el conjunto completo de nombres y códigos de caracteres (aquí).
Cómo dar estilo 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 recomendados. Los siguientes estilos facilitan la aplicación de los tamaños, colores y estados de actividad recomendados.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Tamaño
Si bien los íconos de la fuente se pueden ajustar a cualquier tamaño, de acuerdo con los lineamientos para íconos de material design, recomendamos que se muestren en 18, 24, 36 o 48 px. El valor predeterminado es de 24 px.
Reglas de CSS para las pautas estándar de tamaño de Material Design:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Los íconos de material se ven mejor en 24 px, pero si un ícono debe mostrarse en un tamaño alternativo, el uso de las reglas de CSS anteriores puede ayudar:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>Colorear
El uso de la fuente de íconos permite un estilo sencillo de un ícono en cualquier color. De acuerdo con los lineamientos para íconos de material design, en el caso de los íconos activos, recomendamos usar negro con un 54% de opacidad o blanco con una opacidad del 100% cuando se muestren en fondos claros u oscuros, respectivamente. Si un ícono está inhabilitado o inactivo, se usa negro al 26% o blanco al 30% para fondos claros y oscuros, respectivamente.
A continuación, se muestran algunos ejemplos en los que se usan los estilos de CSS de Material descritos anteriormente:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Ejemplo para dibujar un ícono sobre un fondo claro con un color de primer plano oscuro:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Ejemplo para dibujar un ícono sobre un fondo oscuro con un color claro de primer plano:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>Para establecer un color de ícono personalizado, define una regla de CSS que especifique el color deseado para la fuente:
.material-icons.orange600 { color: #FB8C00; }
y, luego, usar la clase cuando te refieras al ícono:
<span class="material-icons orange600">face</span>Imágenes de íconos para la Web
Los íconos de material también están disponibles como imágenes normales, en formato PNG y SVG.
SVG
Los íconos de material se proporcionan como SVG compatibles con proyectos web. Los íconos individuales se pueden descargar desde la biblioteca de íconos de material. Los SVG también están disponibles en los íconos de material design repositorio de git en la ruta de acceso:
material-design-icons/src/
Por ejemplo, los íconos de los mapas se encuentran en src/maps:
material-design-icons/src/maps/
Si se usan varios iconos en un sitio web, se recomienda crear hojas de objetos a partir de las imágenes. Para obtener más información, consulta la documentación del directorio de objetos del repositorio de Git.
PNG
PNG es la forma más tradicional de mostrar íconos en la Web. Nuestras descargas de la biblioteca de íconos de material ofrecen densidades simples y dobles para cada ícono. Se denominan 1x y 2x respectivamente en la descarga. Los íconos también están disponibles en el repositorio de Git, en el siguiente código:
material-design-icons/png/
Si se usan varios iconos en un sitio web, se recomienda crear hojas de objetos a partir de las imágenes. Para obtener más información, consulta las recomendaciones del directorio de objetos del repositorio de Git.
Íconos para Android
Los archivos PNG adecuados para Android están disponibles en la biblioteca de íconos de material. Están disponibles en todas las densidades de pantalla compatibles, por lo que deberían verse bien en cualquier dispositivo.
Los íconos también están disponibles en el repositorio de Git de íconos de material design en la misma combinación de colores y tamaños, nombrada a continuación:
Actualmente, el elemento de diseño vectorial solo está disponible como un ícono negro de 24 dp. Esto se hace por motivos de compatibilidad con nuestro tamaño de ícono más estándar. Para renderizar el ícono en un color diferente, usa el ajuste de tono de los elementos de diseño disponible en Android Lollipop.
Cuando se usa el elemento de diseño vectorial, puede que no sea necesario incluir el archivo PNG de densidad xxxhdpi, ya que es poco probable que un dispositivo que admita esa densidad de pantalla no admita interfaces dibujables en vector.
Íconos para iOS
Los íconos de material también funcionan bien en apps para iOS. Tanto en la biblioteca de íconos de material como en el repositorio de Git, estos íconos se empaquetan en conjuntos de imágenes de Xcode que funcionarán fácilmente con los catálogos de elementos de Xcode (xcassets). Estos conjuntos de imágenes se pueden agregar a cualquier catálogo de recursos de Xcode arrastrándolos a Xcode y al catálogo de recursos o copiando la carpeta en la carpeta xcasset.
El conjunto de imágenes contiene las imágenes de densidad única, doble y triple (1x, 2x, 3x), por lo que funcionan en todas las densidades de pantalla de iOS conocidas. Se proporcionan íconos blanco y negro, pero recomendamos usar imageWithRenderingMode de UIImage con UIImageRenderingModeAlwaysTemplate que permitirá usar la imagen como una máscara alfa que puede ajustarse a cualquier color posible.
Ejemplo de Objective-C:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Ejemplo de Swift:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Íconos en dirección de derecha a izquierda
Los idiomas como el árabe y el hebreo se leen de derecha a izquierda (RTL). Para los idiomas con escritura de derecha a izquierda, las IUs deben duplicarse para mostrar la mayoría de los elementos en ese formato. Cuando una interfaz de usuario se duplica para RTL, algunos de los íconos también deben duplicarse. Cuando el texto, el diseño y la iconografía se duplican para admitir IU de derecha a izquierda, todo lo que se relacione con el tiempo debe representarse como movimiento de derecha a izquierda. Por ejemplo, hacia adelante apunta hacia la izquierda y hacia atrás apunta hacia la derecha. Sin embargo, ten en cuenta que el contexto en el que se coloca el ícono también influye en si un ícono se debe duplicar o no.
Los iconos solo deben duplicarse si su dirección coincide con otros elementos de la IU en el modo RTL. Cuando un ícono representa características visuales de tu sitio web que son diferentes en RTL, el ícono también debe reflejarse en RTL. Por ejemplo, si los números de una lista numerada están del lado derecho en el idioma RTL, los números deben estar a la derecha del ícono duplicado.
Íconos de derecha a izquierda en Android
En este artículo para desarrolladores de Android, se describe en detalle cómo implementar interfaces de usuario de derecha a izquierda. De forma predeterminada, en Android, los íconos no se duplican cuando se duplica la dirección del diseño. Deberás duplicar específicamente los íconos adecuados cuando sea necesario, ya sea proporcionando recursos especializados para idiomas RTL o usando la funcionalidad del framework para duplicar los recursos.
Si quieres proporcionar recursos especializados para idiomas con escritura de derecha a izquierda, puedes usar el calificador ldrtl en directorios de recursos, como res/drawable-ldrtl/. Los recursos dentro de estos directorios solo se usarán para los idiomas con escritura de derecha a izquierda. En el caso de los dispositivos que ejecutan el nivel de API 19 de Android o versiones posteriores, el framework también proporciona el atributo autoMirrored para los elementos de diseño. Cuando este atributo se establece en true, el elemento de diseño se duplica automáticamente en los idiomas con escritura de derecha a izquierda.
Usa la duplicación automática:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
Si no es posible usar la duplicación automática ni proporcionar recursos alternativos de elementos de diseño, también se puede usar el atributo scaleX de ImageView para duplicar elementos de diseño (por ejemplo, proporcionando un diseño específico de RTL en un directorio res/layout-ldrtl).
Duplicación dentro del archivo de diseño:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
Por último, los elementos de diseño se pueden duplicar de manera programática.
Comprueba manualmente la dirección del diseño con getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
Duplica el contenido de ImageView de manera programática:
imageView.setScaleX(-1);
Íconos de derecha a izquierda en iOS
iOS tiene el concepto de un UISemanticContentAttribute que se adjunta a cada vista. Puede ser unspecified, forceLeftToRight, forceRightToLeft, playback o spatial. iOS usa este valor y la configuración (de izquierda a derecha [LTR]/RTL del dispositivo que presenta la interfaz para determinar la efectivaLayoutDirection de la vista. EfectLayoutDirection determina si se debe duplicar o no una imagen cuando se la muestra.
De forma predeterminada, el contenido semántico de las imágenes se establece en unspecified. De esta manera, se duplicarán en el modo de derecha a izquierda. Si no deseas que se duplique un ícono, debes establecerlo explícitamente para que sea forceLeftToRight. Apple menciona algunas excepciones que no se deben duplicar, como la reproducción de contenido multimedia (Avance rápido, retroceso, etc.), notas musicales, imágenes que indican el paso del tiempo, etcétera.
Ejemplo de Objective-C:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Ejemplo de Swift:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
Para obtener documentación más detallada sobre cómo implementar la escritura de derecha a izquierda en iOS y macOS, consulta la documentación de Apple sobre la escritura de derecha a izquierda.
Se agregó contenido semántico en iOS 9. Si admites versiones anteriores de iOS, el framework de internacionalización de materiales adapta parte de la funcionalidad a iOS 8.
Íconos de derecha a izquierda en la Web
Te recomendamos el siguiente artículo como guía para usar la escritura de derecha a izquierda en la Web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2.
De forma predeterminada en la Web, los íconos no se duplican cuando se duplica la dirección del diseño. Debes duplicar específicamente los íconos adecuados cuando sea necesario.
En el siguiente ejemplo, se muestra cómo implementar una regla simple de CSS de derecha a izquierda. También puedes verlo en CodePen.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Genera tus propios íconos de derecha a izquierda con ImageMagick
Si la duplicación de los íconos en el código no es una opción, puedes usar ImageMagick para duplicar la imagen horizontalmente.
convert -flop my_icon.png my_icon_rtl.png
¿Qué íconos deben duplicarse para la escritura de derecha a izquierda?
A continuación, se incluye una lista de íconos que pueden duplicarse programáticamente en RTL:
| Flecha hacia atrás | Flecha hacia atrás en iOS | Flecha hacia adelante |
| Flecha hacia adelante en iOS | Flecha hacia la izquierda | Flecha hacia la derecha |
| Tarea | Devolución de tareas de | Retroceso de |
| Batería desconocida: | Se realizó llamada | Combinar llamadas de |
| llamada perdida | llamada perdida | Llamada recibida: |
| División de llamada de | cheurón a la izquierda | cheurón a la derecha |
| modo de lector de Chrome | dispositivo desconocido | DVR |
| nota del evento | Lista de reproducción destacada de | video destacado |
| primera página | Aterrizaje de | Despegue del vuelo |
| Disminución de sangría del formato | Aumento de sangría del formato | Lista de formatos de con viñetas |
| adelante | funciones | entrada |
| Pestaña del teclado | etiqueta | La etiqueta es importante |
| Contorno de etiqueta | última página | lanzamiento |
| Lista | Ayuda en vivo de | Compartir pantalla de dispositivo móvil: |
| Gráfico de varias líneas de | navegar antes | navegar siguiente |
| la próxima semana | nota | abre en una nueva |
| Agregar a playlist | Música en fila de | Rehacer |
| respuesta | responder a todos | de compartir pantalla |
| Enviar | Texto corto de | Mostrar gráfico de |
| Ordenar: | Media estrella de | sujeto |
| Tendencia plana: | total | tiene una tendencia a la baja |
| es tendencia en alza | deshacer | Lista de vistas de |
| ver edredón | Ajustar texto |