Jetpack Compose Icon

How to Use Icons in Jetpack Compose?

by
Jetpack Compose Icon

In this article, we’ll learn how to work with icons in Jetpack Compose.

Prerequisites:

By default, Jetpack Compose comes with a limited set of icons. Add the following dependency in the app-level gradle file to get all the material icons.

// material icons
implementation "androidx.compose.material:material-icons-extended"

There are two things about the material icons:

1. The above dependency is large. It will increase your app size. So, I highly suggest you use proguard to shrink the code.

2. These material icons are equivalent to those available on the Google Fonts website. You can also browse them on the site.

Now, let’s start coding.

Create a MyUI() composable in the MainActivity and call it from the onCreate() method. We will write our code in it.

MainActivity for Material 3 Jetpack Compose:

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.rounded.Verified
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.content.ContextCompat
import androidx.core.graphics.drawable.toBitmap

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {

}

MainActivity for Material 2 version:

// add the following imports
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.rounded.Verified
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.content.ContextCompat
import androidx.core.graphics.drawable.toBitmap

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {
    
}

Note: I am using the Material 3 Jetpack Compose. If you are working with Material 2, you may see a slightly different output and small changes in the method signatures, but the code will still work as expected.

Jetpack Compose provides Icon API. Start typing Icon and select the one with the imageVector parameter. We will talk about the other overloads in a moment.

Jetpack Compose icon with image vector

It takes 4 parameters:

imageVector – It is the image vector to be drawn in the icon.

contentDescription – It is a text that describes the icon. Accessibility services (like screen readers) use this text. If you don’t want this behavior, pass null.

modifier – To modify the layout of the icon.

tint – It is the icon color.

Simple Icon Example:

For a simple icon, imageVector and contentDescription parameters are mandatory.

@Composable
fun MyUI() {
    Icon(imageVector = Icons.Default.Person, contentDescription = "Person Icon")
}

Output:

Jetpack Compose Icon Example

The material icons library provides different styles. So, instead of Icons.Default, we can also use the following:

  • Icons.Outlined
  • Icons.Rounded
  • Icons.Filled
  • Icons.TwoTone
  • Icons.Sharp

Look at the official docs to learn more about them.

Icon Size:

By default, Icon composables are 24.dp in size. We can change it using the Modifier.size() method.

@Composable
fun MyUI() {
    Icon(
        modifier = Modifier.size(size = 120.dp),
        imageVector = Icons.Default.Person,
        contentDescription = "Person Icon"
    )
}

Output:

Icon Size

Related: Button onClick Animation Using the Size Property

Icon Color:

The default color is LocalContentColor.current. We can change it using the tint parameter.

@Composable
fun MyUI() {
    Icon(
        modifier = Modifier.size(size = 120.dp),
        imageVector = Icons.Default.Person,
        contentDescription = "Person Icon",
        tint = Color.Green
    )
}

Output:

Icon Color

Related: How to Use Colors in Jetpack Compose?

Icon Background Color:

The modifier’s background() method helps us to set the background color to an icon.

@Composable
fun MyUI() {
    Icon(
        modifier = Modifier
            .size(size = 120.dp)
            .background(color = Color.LightGray),
        imageVector = Icons.Default.Person,
        contentDescription = "Person Icon"
    )
}

Output:

Icon Background Color

Clickable Icon:

Jetpack Compose provides IconButton(). If you don’t want to use it, you can make the Icon() clickable with the help of the clickable() modifier.

@Composable
fun MyUI() {
    val contextForToast = LocalContext.current.applicationContext

    Icon(
        modifier = Modifier
            .size(size = 120.dp)
            .clickable {
                Toast
                    .makeText(contextForToast, "Click", Toast.LENGTH_SHORT)
                    .show()
            },
        imageVector = Icons.Default.Person,
        contentDescription = "Person Icon"
    )
}

Output:

Clickable Icon Jetpack Compose

Related: How to Remove Ripple Effect in Jetpack Compose?

Icon with Text:

To display text along with the icon, put the Icon() and Text() composables inside a Row layout.

@Composable
fun MyUI(greenColor: Color = Color(0xFF2EB674)) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = Icons.Rounded.Verified,
            contentDescription = null,
            tint = greenColor,
            modifier = Modifier.size(28.dp)
        )

        // gap between icon and text
        Spacer(modifier = Modifier.width(width = 6.dp))

        Text(
            text = "Verified",
            color = greenColor,
            fontSize = 20.sp
        )
    }
}

Output:

icon with text

Related: Spacer in Jetpack Compose

Icon() Overloads:

The Icon() API provides two additional overloads. The first overload includes a painter parameter, while the second has a bitmap parameter. Let’s look at them.

1. Icon() with painter Parameter:

It is used to display the icons from the drawable resource folder. It takes 4 parameters:

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

First, right-click on the drawable folder (which is in the res) and select New > Vector Asset. Choose an icon and add it to the project. We can get it in the code using the painterResource() method.

@Composable
fun MyUI() {
    Icon(
        painter = painterResource(id = R.drawable.ic_baseline_chair_24),
        contentDescription = null,
        tint = Color.Red,
        modifier = Modifier.size(size = 120.dp)
    )
}

Output:

icon from drawable

2. Icon() with bitmap Parameter:

It is used for displaying bitmap objects.

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

Here is an example:

@Composable
fun MyUI() {
    val context = LocalContext.current
    val bitmap = ContextCompat.getDrawable(context, R.drawable.ic_baseline_chair_24)?.toBitmap()
        ?.asImageBitmap()!!

    Icon(
        bitmap = bitmap,
        contentDescription = null,
        tint = Color.Magenta,
        modifier = Modifier.size(size = 120.dp)
    )
}

Output:

icon bitmap

This is all about Icon APIs in Android Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

For more information, look at the Material and Android docs.

Related Articles:

Leave a Comment