Skip to content
DeveloperMemos

Using IconButton in Compose

Compose, IconButton, Android1 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}

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.

ExpressVPN

Protect your online privacy and security with ExpressVPN, a reliable and fast VPN service.
Sign up now to get 3 months free!

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

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.