IconButton

Composable Component

IconButton is a clickable icon, used to represent actions. An IconButton has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines. content is centered inside the IconButton.

Common
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)

Parameters

onClickthe lambda to be invoked when this icon is pressed
modifieroptional Modifier for this IconButton
enabledwhether or not this IconButton will handle input events and appear enabled for semantics purposes
interactionSourcean optional hoisted MutableInteractionSource for observing and emitting Interactions for this IconButton. You can use this to change the IconButton's appearance or preview the IconButton in different states. Note that if null is provided, interactions will still happen internally.
contentthe content (icon) to be drawn inside the IconButton. This is typically an Icon.

Code Examples

IconButtonSample

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled

Icon IconToggleButton