Jetpack Compose Academy · Урок

Материальные иконки с Icon

Используйте встроенный набор иконок где угодно.

«Материальные иконки с Icon» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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! 🎯

Часто задаваемые вопросы

Урок «Материальные иконки с Icon» бесплатный?

Да — полный текст урока «Материальные иконки с Icon» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Материальные иконки с Icon»?

Используйте встроенный набор иконок где угодно. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Материальные иконки с Icon»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Jetpack Compose Academy