Íconos de material

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)
)
MaterialIconsSnippets.kt

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)
)
MaterialIconsSnippets.kt

Figura 1: Vector de carrito de compras con ícono

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.