How can I access all material icons in Android Studio through Icon in Jetpack Compose

Question

Jetpack Compose has an Icon composable where I can access an imageVector. See example below.

Icon(
     imageVector = Icons.Rounded.Email,
     contentDescription = "Email Icon",
)

Why can I not access all icons listed in this Material Icons library through this imageVector. For example, "wifi_off" can't be accessed. There is a very limited library accessible via imageVector

https://fonts.google.com/icons?selected=Material+Icons&icon.style=Rounded&icon.platform=android

Greenwald

Answer 1

Just add the dependency

implementation "androidx.compose.material:material-icons-extended:$compose_version"

and use:

Icon(
    imageVector = Icons.Rounded.WifiOff,
    contentDescription = "Email Icon",
)

As described in the doc:

androidx.compose.material.icons is the entry point for using Material Icons in Compose, designed to provide icons that match those described at fonts.google.com/icons.
The most commonly used set of Material icons are provided by androidx.compose.material:material-icons-core.
A separate library, androidx.compose.material:material-icons-extended, contains the full set of Material icons.

Psychotic

After importing this library, my APK size increased by ~5M. As the Maven Repo page says "It is a very large dependency and should not be included directly." How could we properly handle this? – Speakeasy

@John6 From official Android documentation: Note that only the most commonly used icons are provided by default. You can add a dependency on androidx.compose.material:material-icons-extended to access every icon, but note that due to the very large size of this dependency you should make sure to use R8 / ProGuard to remove unused icons from your application. developer.android.com/reference/kotlin/androidx/compose/… – Manzoni

I have solved the problem. Actually we do not need do anything with ProGuard, the reason why my package size increased is because someone in our team added a rule kept all stuff under package androidx. – Speakeasy

Is there any way to use these ImageVectors in legacy code? For example, notifications & widgets. At the moment it seems like we need to use the drawable resources for that which means a lot of doubled-up images. – Jovitajovitah

Answer 2

Huge thanks to Gabriele Mariotti for pointing us towards the extended icons library in his answer. I would like to post another answer to share how to pull the same thing off if you're managing your dependencies and building your app with Gradle the newer way.

1. Add this to the [libraries] section of your gradle/libs.versions.toml:

material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }

2. Add this to the dependencies scope in your app/build.gradle.kts:

implementation(libs.material.icons.extended)

3. Sync your project with your Gradle build files.

Now you should be able to use all your favourite Material Icons in your app importing them like this:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Fastfood

// ...

Icon(
    imageVector = Icons.Outlined.Fastfood,
    contentDescription = "Burger and Soda",
)

League

Answer 3

There is a library that you have to use in your app level build.gradle to use more icons in jetpack compose.

If you are using toml version of gradle use this

    implementation(libs.androidx.material.icons.extended)

inside you toml file use this

androidx-material-icons-extended = {  group = "androidx.compose.material", name = "material-icons-extended"}

If you are using older android version use this

 implementation "androidx.compose.material:material-icons-extended:$compose_version"

Usage :

        Icon(imageVector = Icons.Filled.ExpandMore, contentDescription = null )

Dyestuff