How to Make Icon Clickable in Android Jetpack Compose

In mobile app development, it’s important to handle user interactions effectively, and icons are a key element that users interact with. In this blog post, we’ll walk you through handling click events on icons in Jetpack Compose.

Icon Composable

The Icon composable in Jetpack Compose is a handy tool for displaying icons, following Material Design guidelines. It provides customization options for size, tint, and more.

Icon(
imageVector = Icons.Default.Home,
contentDescription = "Home Icon"
)

In this example, we’re using the Icon composable to display the default home icon.

How to Make Icon Clickable Using IconButton

To handle clicks on an icon, you need to wrap the Icon composable with a clickable composable such as IconButton. Here’s an example of how you can make an icon clickable.

IconButton(onClick = { Log.d("Click", "IconExample")}) {
            Icon(
                imageVector = Icons.Default.Home,
                contentDescription = "Home Icon"
            )
        }

In this example, we’re using IconButton to make the home icon clickable. When the icon is clicked, the code inside the onClick function will be executed.

How to Make Icon Clickable Using Modifier

Aside from the IconButton composable, you can also use the Modifier.clickable modifier with the Icon composable. Here is an example of how you can achieve this.

Icon(
     imageVector = Icons.Default.Home,
     contentDescription = "Home Icon",
     modifier = Modifier.clickable { Log.d("Click", "IconExample") }
    )

In this example, we’ve added the Modifier.clickable modifier to the Icon composable. This makes the icon itself clickable, and the code inside the lambda function will be executed when the icon is clicked.

Remember, Modifier.clickable is not restricted to Icon and can be used to make any composable clickable. However, if you’re handling click events for icons specifically, IconButton is often a more semantically appropriate choice.

Following is the complete code for reference.

package com.example.example

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    IconExample()
                }
            }
        }
    }
}

@Composable
fun IconExample() {
    Column{
            Icon(
                imageVector = Icons.Default.Home,
                contentDescription = "Home Icon",
                modifier = Modifier.clickable { Log.d("Click", "IconExample") }
            )
    }
}

@Preview(showBackground = true)
@Composable
fun ExamplePreview() {
    ExampleTheme {
        IconExample()
    }
}

Handling click events on icons is a crucial aspect of mobile app development, enabling you to create intuitive and responsive user interfaces. Jetpack Compose provides multiple options, such as IconButton and Modifier.clickable, to easily handle user interactions.