How to add Material icons in Android Jetpack Compose

Jetpack Compose helps to build the UI of your Android app easier. Let’s learn how to add Icons, especially Material icons to your app with Jetpack Compose.

Icon composable is used to add icons to the app. You can see the list of material icons here. See the code snippet given below.

import androidx.compose.material.Icon

Icon(Icons.Outlined.Home, contentDescription = null, tint = Color.Green)

You can use the same icons but with different types such as Icons.Rounded, Icons.Filled, Icons.Outlined etc.

Following is the complete code to show icons in Android Jetpack Compose.

package com.example.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Home
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
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.colors.background
                ) {
                    iconExample()
                }
            }
        }
    }
}

@Composable
fun iconExample() {
    Column() {
        Icon(
            Icons.Outlined.Home,
            contentDescription = null,
            tint = Color.Green,
            modifier = Modifier.size(
                100.dp
            )
        )
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ExampleTheme {
        iconExample()
    }
}

And following is the output of the above Android Jetpack Compose icon example.

That’s how you add Material icons to your Android project with Jetpack Compose.

Mohammed Rashid

Keep Reading

Explore more →

How to Blur an Image in Android Jetpack Compose

How to Add Elevated Button in Android Jetpack Compose

How to add a Button with Text and Icon in Android Jetpack Compose