Jetpack Compose Academy · Aula

Ícones do Material com Icon

Use o conjunto integrado de ícones em qualquer lugar.

Ícones do Material com Icon é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Meet the Icon Composable

For small symbols like a heart or a back arrow, Compose gives you Icon. It is lighter than Image and tints itself to your theme.

A Library of Icons

You get hundreds of ready-made symbols from Icons, the Material icon set. No drawing, no exporting, just reference one by name.

Icon(imageVector = Icons.Default.Favorite, contentDescription = "Like")

imageVector Is the Symbol

Icon takes an imageVector, a vector graphic from the Material set. Because it is a vector, it stays crisp at any size.

Five Visual Styles

Each symbol comes in styles: Default, Outlined, Rounded, Sharp, and TwoTone. Pick the one that matches your app personality.

Icon(Icons.Outlined.Settings, contentDescription = "Settings")

Extended Icon Pack

The base set is small to keep apps lean. Add the material-icons-extended dependency to unlock thousands more symbols.

Icons Tint Automatically

By default an Icon paints itself with the current content color from your theme, so it always looks consistent without you setting a color.

Override the Tint

Want a custom color? Pass a tint argument and the symbol repaints in exactly that shade.

Icon(Icons.Default.Star, contentDescription = null, tint = Color.Yellow)

Sizing an Icon

Icons render at 24dp by default, the Material standard. Change it with a Modifier.size just like any other composable.

Icon(Icons.Default.Home, contentDescription = null, modifier = Modifier.size(32.dp))

Describe It Too

Like Image, Icon needs a contentDescription. Describe its action, such as "Add to favorites", or pass null if a nearby label already explains it.

Icons Inside Buttons

Icons shine inside other composables. Dropping an Icon into an IconButton gives you a tappable, perfectly sized action.

IconButton(onClick = {}) { Icon(Icons.Default.Delete, "Delete") }

Icon from a Drawable

You can also build an Icon from your own asset using painterResource instead of imageVector, keeping the same automatic tinting.

Quick Check

What is the default color an Icon uses when you do not set a tint?

Recap: Material Icons

You now use Icon for crisp vector symbols, choose a style, override the tint, and size with a modifier. Next: scaling images! 🎯

Perguntas Frequentes

A aula “Ícones do Material com Icon” é grátis?

Sim — o texto completo de “Ícones do Material com Icon” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “Ícones do Material com Icon”?

Use o conjunto integrado de ícones em qualquer lugar. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Ícones do Material com Icon”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Jetpack Compose Academy