Saltar al contenido principal

Resumen

Pasa el contenido del icono mediante el slot de nodo icon en minúsculas. El mosaico obtiene el color de fondo y el color de primer plano heredado de la paleta del tema. El contenido del icono es decorativo. Mantén una etiqueta visible junto a él o asigna a la raíz role="img" y un nombre accesible para una imagen etiquetada independiente.

”Uso”

Geometría y composición nativa

El mosaico usa de forma predeterminada 16px mediante el token de espaciado y utiliza el token pequeño de radio de borde. Establece las dimensiones y el trazo del icono en el propio nodo. style o className de la raíz controla el ancho, la altura, el borde, la forma y los colores del mosaico; los estilos explícitos anulan los valores predeterminados de la paleta. Las ilustraciones personalizadas deben heredar currentColor cuando utilizan el color de primer plano de la paleta.
Los atributos nativos, los eventos, className, style y ref se aplican al div exterior. render reemplaza ese destino mediante la composición de Base UI y conserva el contenido decorativo del icono. Asigna un nombre al control circundante al componer un mosaico en una acción. Reemplaza Icon={CompanyIcon} por icon={<CompanyIcon size={16} />}. Mueve las opciones anteriores size y stroke al nodo de icono y utiliza estilos de raíz para dimensiones personalizadas del mosaico.

”Props”

string
CSS class applied to the tile root.
string | null
predeterminado:"gray"
Theme palette name used to derive the background and foreground shades. Invalid names use the default theme color.
ReactNode
requerido
Decorative icon content. The caller controls its dimensions and stroke.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the div root while preserving icon content and native props.
CSSProperties
Inline styles override tile geometry and palette defaults.