How to Use Icons in Jetpack Compose?

In this article, we will learn how to work with icons in Android 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.

// replace compose_version with your jetpack compose version
implementation "androidx.compose.material:material-icons-extended:$compose_version"

You can find the project and app level gradle files on this page.

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.

For this article, create a MyUI() composable in the MainActivity and call it from the onCreate() method.

// add the following imports
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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() {
    
}

We will write our code in the MyUI().

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.

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:

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 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 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:

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 file. It takes 4 parameters:

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.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:

2. Icon() with bitmap Parameter:

It is used for displaying bitmap objects.

@Composable
@NonRestartableComposable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.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:

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

Related Articles:

Resources:

Simple Icon Example:

Icon Size:

Icon Color:

Icon with Text:

Icon() Overloads:

1. Icon() with painter Parameter:

2. Icon() with bitmap Parameter:

Leave a Comment Cancel reply