أيقونات Material باستخدام Icon

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.

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

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

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

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

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

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

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

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 shine inside other composables. Dropping an Icon into an IconButton gives you a tappable, perfectly sized action.

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

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

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