Skip to content
DeveloperMemos
Contact

Using IconButton in Compose

— Compose, IconButton, Android — 1 min read

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:

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:

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}
Astro(ASO Tool)

If you're looking to increase your app's visibility, Astro is the tool for you. You can track your app's keyword rankings for multiple countries all at the same time. I've been using it for a few months now and it's been a game-changer for me. I highly recommend it! 🚀

We earn a commission if you make a purchase, at no additional cost to you.

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.