Jetpack Compose Academy · Ders

Icon ile Material Simgeleri

Yerleşik simge kümesini istediğiniz yerde kullanın.

Icon ile Material Simgeleri, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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

Sıkça Sorulan Sorular

“Icon ile Material Simgeleri” dersi ücretsiz mi?

Evet — “Icon ile Material Simgeleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“Icon ile Material Simgeleri” dersinde ne öğreneceğim?

Yerleşik simge kümesini istediğiniz yerde kullanın. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Icon ile Material Simgeleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Jetpack Compose Academy Sayfasına Dön