Android Jetpack compose IconButton padding

Question

How to remove padding in an IconButton ? I want items in my column have the same start padding

Column(
    modifier = Modifier
        .fillMaxWidth() 
        .padding(horizontal = 16.dp)
) {
    IconButton(onClick = { }) {
        Icon(asset = Icons.Filled.Search)
    }
    Text("Some text")
} 

Answer 1

The space is due to accessibility touch targets and a default size of 48.dp.

Starting with 1.2.0 the best best way to change the default behaviour and remove the extra space is disabling the LocalMinimumInteractiveComponentEnforcement and applying a size modifier:

CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
    IconButton(
        modifier = Modifier.size(24.dp),
        onClick = { }
    ) {
        Icon(
            Icons.Filled.Search,
            "contentDescription",
        )
    }
}

Pay attention because in this way it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.

---

With 1.0.0 the IconButton applies a default size with the internal modifier: IconButtonSizeModifier = Modifier.size(48.dp).

You can modify it using something like:

IconButton(modifier = Modifier.
        then(Modifier.size(24.dp)),
    onClick = { }) {
    Icon(
        Icons.Filled.Search,
        "contentDescription",
        tint = Color.White)
}

It is important the use of .then to apply the size in the right sequence.

Answer 2

If you use IconButton just for handling click listener, instead of:

IconButton(onClick = { // Todo -> handle click }) {
    Icon(asset = Icons.Filled.Search)
}

You can use:

Icon(
    asset = Icons.Filled.Search,
    modifier = Modifier.clickable { // Todo -> handle click },
)

With this way you don't need to remove extra paddings.

Answer 3

Wrap the IconButton with CompositionLocalProvider to override the value of LocalMinimumTouchTargetEnforcement which enforces a minimum touch target of 48.dp.

CompositionLocalProvider(
    LocalMinimumTouchTargetEnforcement provides false,
) {
    IconButton(onClick = { }) {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "Search",
        )
    }
}