6

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

Vaz
  • 309
  • 2
  • 15

2 Answers2

6

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.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • 1
    After importing this library, my APK size increased by ~5M. As the [Maven Repo](https://mvnrepository.com/artifact/androidx.compose.material/material-icons-extended?repo=google) page says "It is a very large dependency and should not be included directly." How could we properly handle this? – John 6 Jun 29 '23 at 08:19
  • @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.` https://developer.android.com/reference/kotlin/androidx/compose/material/icons/Icons – Mikhail Aug 02 '23 at 14:54
  • 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. – John 6 Aug 03 '23 at 12:17
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.

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",
)
Arthur Khazbs
  • 705
  • 8
  • 19