Material 3 Icon Buttons in Jetpack Compose

Get started with Material 3 icon buttons in Jetpack Compose to create user-friendly interfaces for common actions like opening menus or toggling states.

Explore Icon Button Styles

Learn to implement two Material 3 icon button types for common user actions.

Default Icon Button

Button with icon for common actions.

@Composable
fun DefaultIconButtonExample(onClick: () -> Unit) {
    // Creates an icon button for common actions
    IconButton(
        onClick = { onClick() } // *Required: Function called when the button is clicked
    ) {
        Icon(
            Icons.Filled.Search, // *Required: Displays the button icon
            contentDescription = "Search button" // *Required: Describes the icon for accessibility
        )
    }
}
  

Use a Default Icon Button when you want to trigger common actions with a clear icon.

Examples:

• Open a menu in an app bar
• Search in a search bar
• Share in a content view

---

Toggle Icon Button

Button with icon for toggling states.

@Preview
@Composable
fun ToggleIconButtonExample() {
    // Creates a toggleable icon button for binary actions
    var isToggled by rememberSaveable { mutableStateOf(false) } // Tracks toggle state, persists across configuration changes
    IconButton(
        onClick = { isToggled = !isToggled } // *Required: Function called when the button is clicked
    ) {
        Icon(
            painter = if (isToggled) painterResource(R.drawable.favorite_filled) else painterResource(R.drawable.favorite), // *Required: Displays filled or outlined icon based on state
            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button." // *Required: Describes the icon for accessibility
        )
    }
}
  

Use a Toggle Icon Button when you want to toggle between two states with an icon.

Examples:

• Favorite a post in a social media app
• Bookmark an article in a reading app
• Mute audio in a media player