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) )
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) )
![Vetor de carrinho de compras com ícone](https://developer.android.com/static/develop/ui/compose/images/graphics-shopping.png?authuser=9&hl=pt)
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.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Recursos no Compose
- Acessibilidade no Compose
- Como carregar imagens {:#loading-images}