Ícones do Material Design

O elemento combinável Icon é uma maneira conveniente de desenhar um único ícone colorido na tela que siga as diretrizes do Material Design. Para usar Icon, inclua a biblioteca Compose Material ou a Compose Material 3.

Por exemplo, se você tiver um drawable vetorial que queira carregar com os padrões do Material Design, use o elemento combinável Icon da seguinte maneira:

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)
MaterialIconsSnippets.kt

Por padrão, o elemento combinável Icon é colorido com LocalContentColor.current e tem 24.dp de tamanho. Ele também expõe um parâmetro de cor tint, que usa o mesmo mecanismo de tonalidade que o descrito na seção Tonalidade da imagem. A finalidade do elemento combinável Icon é ser usado em elementos pequenos de ícone. Se quiser mais opções de personalização, use o elemento combinável Image.

A biblioteca Material Icon também inclui um conjunto de Icons predefinidos que pode ser usado no Compose sem precisar importar um SVG manualmente. Para exibir a versão arredondada do ícone do carrinho de compras, use este código:

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
MaterialIconsSnippets.kt

Figura 1: Vetor de carrinho de compras com ícone.

Vale ressaltar que não é necessário usar Icon para renderizar um VectorDrawable na tela, já que Icon usa Modifier.paint(painterResource(R.drawable.ic_bus_stop)) para desenhar o Icon na tela. Para ver mais informações sobre todos os ícones disponíveis, confira a documentação de ícones.