# Iconos
Permite explorar un conjunto de iconos por nombre y copiar el SVG de cada uno.
### Problemas conocidos
No se conocen problemas.
### Copiar el marcado
Icon grid markup
```html
```
Los mismos iconos como sprite: pégalo una vez en la página y luego dibuja cada uno con ``. El sprite solo funciona en el mismo documento (`href="#id"`); los navegadores bloquean un `` que apunte a un archivo de otro origen, incluido un CDN.
Icon sprite markup
```html
Menu
```
Dos iconos apuntan al final de la línea: `chevron-end` y `arrow-end`, marcados con `data-luz-flip`. En texto de derecha a izquierda, LUZ refleja cualquier elemento con ese atributo mediante la regla siguiente, en la capa de utilidades de core, así que no tienes que escribir nada.
Añade el atributo a cualquier icono tuyo que apunte al final de la línea.
Right-to-left rule, shipped in luz.utilities
```css
:where([data-luz-flip]):dir(rtl) {
transform: scaleX(-1);
}
```
### Variantes y opciones
No hay modificadores. La cuadrícula muestra tantas columnas de al menos 100 px como permita el ancho.
- `.luz-icon-grid`: La lista: una cuadrícula sin viñetas
- `.luz-icon-item`: Una celda con borde: icono, nombre y botón para copiar
- `.luz-icon-display`: Un cuadro de 48 × 48 px que centra el icono, en el color de texto secundario
- `.luz-icon-name`: El nombre bajo el icono
### Cómo funciona
Una lista `` de iconos con los estilos de `components/icon-grid.css`. Los botones para copiar son [botones para copiar](https://nandovejer.github.io/luz/es/docs/components/copy-button/) que activa `clipboard.js`.
- Cada botón incluye el SVG del icono, con los caracteres de escape, en `data-copy`. En esta página un script lo rellena a partir del icono que hay junto al botón, de modo que la página no lleva cada icono dos veces.
- Los iconos son propios de LUZ, dibujados sobre una cuadrícula de 24 × 24 con un trazo redondeado de 1,5 px en `currentColor`. No forman parte de ningún paquete ni se carga ningún archivo: copia el SVG o el sprite en tu página.
- El tamaño del icono es de 24 × 24 px tal como está escrito y de 16 px dentro de un `.luz-btn`. Para que un icono siga el tamaño del texto, establece `width="1.5em" height="1.5em"`.
### Sin JavaScript
Los botones para copiar quedan ocultos. La cuadrícula sigue mostrando todos los iconos y sus nombres.
### Teclado y ARIA
Pulsa Tab para llegar a cada botón para copiar y Enter o Espacio para copiar el SVG.
- El nombre de cada botón combina su propio texto con el nombre del icono mediante `aria-labelledby`: «Copy SVG Plus».
- Los iconos tienen `aria-hidden="true"` y `focusable="false"`: su nombre es el texto que aparece debajo o el texto `.u-sr-only` del botón que los contiene.
- Los iconos de información y advertencia siempre van acompañados de texto. Un glifo aislado no dice nada a quien no puede ver su forma o su color: coloca el texto a su lado o asigna al icono independiente `role="img"` y un nombre.
- El resultado de cada copia se anuncia en una región dinámica cortés.
### Cuándo usarlo
Usa una cuadrícula de iconos para que se pueda explorar un conjunto de iconos y copiar el que se necesite.
### Cuándo no usarlo
No la uses para disponer iconos que realizan acciones: es un catálogo, no una barra de herramientas.
- Para una fila de acciones, usa botones con texto en un [grupo de acciones](https://nandovejer.github.io/luz/es/docs/components/layout/#objects-actions).
- No uses nunca un icono como única etiqueta de una acción: ponle un nombre en texto, visible o en una etiqueta oculta con la clase `.u-sr-only`.
- Para un logotipo o una ilustración, usa un `