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

3.4k views Asked by At

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

2

There are 2 answers

4
Gabriele Mariotti On BEST ANSWER

Just add the dependency

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

and use:

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

enter image description here

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.

0
Arthur Khazbulatov On

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.

If:

  • Your app module's build script is written in Gradle Kotlin DSL in app/build.gradle.kts;

  • Your dependencies versions are maintained in a version catalog in gradle/libs.versions.toml;

  • Your Compose libraries dependencies are versioned using the Compose BOM (compose-bom);

then I suggest you depend on Compose Material Icons Extended like this:

  1. Add this to the [libraries] section of your gradle/libs.versions.toml:
material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
  1. Add this to the dependencies scope in your app/build.gradle.kts:
implementation(libs.material.icons.extended)
  1. 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",
)