El elemento componible Icon
es una forma conveniente de dibujar un ícono de color único en la pantalla que sigue los lineamientos de Material Design. Para usar Icon
, incluye la biblioteca de Compose Material (o la biblioteca de Compose Material 3).
Por ejemplo, si tienes un elemento de diseño vectorial que deseas cargar con los valores predeterminados de material, puedes usar el elemento componible Icon
de la siguiente manera:
Icon( painter = painterResource(R.drawable.baseline_directions_bus_24), contentDescription = stringResource(id = R.string.bus_content_description) )
De forma predeterminada, el elemento componible Icon
se ajusta a LocalContentColor.current
y tiene un tamaño de 24.dp
. También expone un parámetro de color tint
(que aprovecha el mismo mecanismo para ajustar el tono, como se describe en la sección Tono de imagen).
El elemento componible Icon
está diseñado para usarse con elementos de íconos pequeños. Debes usar el elemento componible Image
para obtener más opciones de personalización.
La biblioteca de íconos de material también incluye un conjunto de Icons
predefinidos que se pueden usar en Compose sin necesidad de importar un SVG de forma manual. Para dibujar la versión redondeada del ícono del carrito de compras:
Icon( Icons.Rounded.ShoppingCart, contentDescription = stringResource(id = R.string.shopping_cart_content_desc) )
![Vector de carrito de compras con ícono](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-shopping.png?authuser=5&hl=es)
Vale la pena señalar que no es necesario usar Icon
para renderizar un VectorDrawable
en pantalla; a nivel interno, Icon
usa Modifier.paint(painterResource(R.drawable.ic_bus_stop)
para dibujar el Icon
en la pantalla. Para obtener más información sobre todos los íconos disponibles, consulta la documentación sobre íconos.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Recursos en Compose
- Accesibilidad en Compose
- Cómo cargar imágenes {:#loading-images}