Using IconButton in Compose

In this short post, we will learn how to use the IconButton component in Jetpack Compose to create clickable icons in our Android applications. IconButton is a Material Design component that provides an icon that acts as a button. It can be used to trigger an action when clicked.

Basic Example

Here is an example of how to use IconButton in a Compose function:

Copycopy code to clipboard
1@Composable
2fun IconButtonExample() {
3    IconButton(onClick = { /* do something */ }) {
4        Icon(Icons.Filled.Favorite, contentDescription = "Favorite")
5    }
6}

In this example, we create an IconButton with an onClick lambda that specifies what should happen when the button is clicked. Inside the IconButton, we use the Icon composable to display an icon from the Material Design icon set.

Customization

IconButton can be customized by providing different parameters to the IconButton and Icon composables. For example, we can change the size and color of the icon like this:

Copycopy code to clipboard
1@Composable
2fun IconButtonExample() {
3    IconButton(onClick = { /* do something */ }) {
4        Icon(
5            Icons.Filled.Favorite,
6            contentDescription = "Favorite",
7            tint = Color.Red,
8            modifier = Modifier.size(48.dp)
9        )
10    }
11}

In this example, we use the tint parameter of the Icon composable to change the color of the icon to red. We also use the Modifier.size modifier to change the size of the icon to 48 dp.

Summary

• IconButton is a Material Design component that provides an icon that acts as a button.
• It can be used to trigger an action when clicked.
• IconButton can be customized by providing different parameters to the IconButton and Icon composables.