Material Design Icons - Complete Guide for Jetpack Compose

#android #kotlin #jetpackcompose #mobile

Material Design icons are essential for modern Android apps. This guide covers everything you need to know about Material Icons in Jetpack Compose.

Icon Styles

Material Design provides five icon styles: Filled, Outlined, Rounded, Sharp, and TwoTone. Each style can be accessed through dedicated Material icon functions:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material.icons.rounded.Home
import androidx.compose.material.icons.sharp.Settings

Icon(
    imageVector = Icons.Filled.Favorite,
    contentDescription = "Favorite",
    tint = Color.Red
)

IconButton & IconToggleButton

Use IconButton for clickable icons and IconToggleButton for toggleable states:

var isLiked by remember { mutableStateOf(false) }

IconToggleButton(
    checked = isLiked,
    onCheckedChange = { isLiked = it }
) {
    Icon(
        imageVector = if (isLiked) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
        contentDescription = "Like"
    )
}

Custom Vector Drawables

Import custom SVG vectors and use them with Icon:

val customIcon = painterResource(id = R.drawable.ic_custom_vector)
Icon(
    painter = customIcon,
    contentDescription = "Custom Icon",
    modifier = Modifier.size(48.dp)
)