92

There're many oft-used material icons in androidx.compose.material.icons.Icons but some are missing. Just as an example there is no print icon.

...

import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu  // ok
import androidx.compose.material.icons.filled.Print // error, unresolved reference

@Composable
fun IconsExample() {
    Icon(Icons.Filled.Menu, "menu")   // ok
    Icon(Icons.Filled.Print, "print") // error, unresolved reference
}

What is the simplest way to use those missing icons in an app?

Valeriy Katkov
  • 33,616
  • 20
  • 100
  • 123

2 Answers2

203

There's a separate dependency material-icons-extended which contains the full list of material icons, just add it into your app's build.gradle

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

Now you can use any material icon, for example:

...

import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu  // ok
import androidx.compose.material.icons.filled.Print // ok

@Composable
fun IconsExample() {
    Icon(Icons.Filled.Menu, "menu")   // ok
    Icon(Icons.Filled.Print, "print") // ok
}

A note about the artifact size: Since the artifact contains all material icons for multiple themes, it's a pretty big dependency, 18MB aar as of 1.0.0-alpha10. There's a note on maven repository that recommends not to use it directly:

This module contains all Material icons. It is a very large dependency and should not be included directly.

Сonsidering that most Android projects enable code shrinking for release builds, such a large dependency won't affect the release build size but it can affect your debug build and device upload time, though I'm not sure that the influence would be significant. Actually many of compose samples use this dependency.

If only a few additional icons are required and you decided not to use material-icons-extended artifact, the icons can be easily added into your project resources using Android Studio. You can use such resource-icons like this:

...

import com.mycompany.myproject.R
import androidx.compose.ui.res.painterResource

@Composable
fun ResourceIconExample() {
    Icon(
        painter = painterResource(R.drawable.ic_baseline_print_24),
        contentDescription = "print"
    )
}
Valeriy Katkov
  • 33,616
  • 20
  • 100
  • 123
  • 2
    It seems that Google recommends against including the entire set of extended icons as stated on the [repository](https://mvnrepository.com/artifact/androidx.compose.material/material-icons-extended). Do you know if we can only add those additional icons that are needed? – Jesse Hill Jan 20 '21 at 18:25
  • 3
    @JesseHill Thank you for the observation. I've updated the answer with some additional information including a sample of an icon which doesn't use `material-icons-extended`, hope it helps! – Valeriy Katkov Jan 21 '21 at 10:10
  • please mark this answer as the acceptable one – Androbito Aug 31 '21 at 09:27
  • 2
    I still can't see QuestionMark (https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aquestion_mark%3A) for example even with the extended dependency... – Barry Irvine Feb 08 '22 at 11:55
  • 2
    Great answer, thanks. To get just a few icons, I made an isolated compose app, included `material_icons_extended`, jumped to definition on the icons I wanted, and copied the code to my project. I put it in our own namespace so I can keep track of which are used etc. A little cumbersome, but minimal overhead! Each icon is just a private and a public property, that's it. – Robert Jeppesen Mar 18 '22 at 07:29
  • Using `painterResource` is buggy with the AS compose preview, I constantly get render issues (android.content.res.Resources$NotFoundException: Could not resolve resource value: 0xAAF3D.) and have to recompile, anyone know a fix to this? – Jorge Guillermo Negrete Mar 20 '23 at 15:41
0

I will add to previous comment that you can use not only painterResource but ImageVector. That way you can use the same type parameter in composable functions. ImageBitmap vs ImageVector

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
lm e
  • 81
  • 1
  • 2