187

Is there an easy way to import all the icons of the Material Design icons repository into an android project with out the hazard of doing it manually?

0

7 Answers 7

444

Take a look at Vector Asset Studio

Follow these steps to start Vector Asset Studio:

  • In Android Studio, open an Android app project.
  • In the Project window, select the Android view.
  • Right-click the res folder and select New > Vector Asset.

After you open Vector Asset Studio, you can add a material icon as follows:

  • Select "Material Icon" (by clicking on the Clip Art: ICON)
  • Click Choose
  • Select a material icon
9
  • 30
    This answer is awesome! Not only you can choose material design icon which is already bundled within Android Studio (without any additional plugins) but also you will get VectorDrawable and (wait for it...): "If your minimum API level is set at one of these API levels, Vector Asset Studio also directs Gradle to generate raster images of the vector drawable for backward-compatibility" Feb 12, 2016 at 12:04
  • 5
    You can even change color in xml file and new png's will be generated during build (in app/build/generated/res/pngs/debug). Me gusta! :-) Feb 12, 2016 at 12:14
  • 2
    Upvote for this answer! In case that your icon does not appear in select "Material Icon", you can download it from Material Icons, if you choose SVG format, select Local SVG File in Vector Asset and generate the xml file for the icon. If you choose PNG format, right click in res-> new Image Asset-> select Image-> in Path: choose the large image(xxxhdpi), and generate the png for every density.
    – noe
    Jul 28, 2016 at 17:40
  • 14
    As of Android Studio 2.2 Preview 5, there is no "Choose" button in the Vector Asset Studio anymore but one has to click on the small representation of the icon (below the name). Took me a while to figure that out…
    – balu
    Aug 18, 2016 at 13:48
  • 2
    recent vector asset studio has a clip art type instead of material icon, click the android icon below there to choose your icon
    – Gigarthan
    Apr 12, 2019 at 14:58
38

On folder drawable > right click > new > vector asset, then click the icon:

Android Studio screen shots showing non-obvious place where to click

24

You can use this new plugin for android studio Android Material Design Icon Generator Plugin to help you work with these material icons provided by Google : Google material-design-icons

3
  • 1
    I've installed it, but how do I use it?
    – galdin
    Sep 17, 2015 at 1:45
  • 1
    @gldraphael - Once installed select "File" - "New" - "Material design icon". Select a size of 48dp to ensure that each of the generated files have the standard 48, 72, 96, 144 & 192 pixel height/width. Of course select a smaller dp size if required. Oct 15, 2015 at 4:04
  • 2
    @MartynDavis thanks. I found it though. What I like the most about it is the fact that I can choose the color too.
    – galdin
    Oct 16, 2015 at 22:23
8

Here is a script that clones the github repository of the material design icons at

https://github.com/google/material-design-icons

and creates an index of all files. It also copies the svg files to subdirectories by category. You can use this as a basis to copy the files your are interested in into your project - just modify the find and cp copy statement to your liking. If you e.g. need the png's at a certain size - they are in neighbouring directories and you need to modify the find and copy command accordingly then.

enter image description here

#!/bin/bash
# WF 2016-06-04
# get google material design icons
# see http://stackoverflow.com/questions/28684759/import-material-design-icons-into-an-android-project
tmp=/tmp/icons
index=$tmp/index.html
mkdir -p $tmp
cd $tmp
if [ ! -d material-design-icons ]
then
  git clone https://github.com/google/material-design-icons
fi
cat << EOF > $index
<html>
  <head>
    <head>
    <body>
      <h1>Google Material Design Icons</h1>
EOF
for icon in `find . -name *.svg | grep production | grep 48`
do
    svg=`basename $icon .svg`
    category=`echo $icon | cut -f3 -d '/'`
    echo $category $svg.svg
    mkdir -p $tmp/$category
    cp $icon $tmp/$category
    echo "    <img src='"$icon"' title='"$category $svg"' >" >> $index
done
cat << EOF >> $index
  </body>
</html>
EOF
1
  • 2
    Sweet script. Since this is kind of a throwaway use-case for that repo suggest changing to git clone --depth=1 to get a shallow clone. Downloads a bit faster.
    – mbac32768
    May 4, 2019 at 18:48
4

I found this link helpful for me.

https://dev.materialdesignicons.com/getting-started/android

gradle implementation is available

dependencies {
    implementation 'net.steamcrafted:materialiconlib:1.1.5'
}

After adding gradle dependency, you can create menu item this way.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" <!-- important, you'll have to include this to use the custom xml attributes -->
    xmlns:tools="http://schemas.android.com/tools" >

    <!-- example of a menu item with an icon -->
    <item
        android:title="Disable Wifi"
        app:showAsAction="always"
        app:materialIcon="wifi_off" <!-- This sets the icon, HAS AUTOCOMPLETE ;) -->
        app:materialIconColor="#FE0000" <!-- Sets the icon color -->
    />

</menu>
1

In the documentation i found this usefull line :

import androidx.compose.material.Icon

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")

It's pretty simple and works like a charm !

1

Adding Icons to the project by right clicking on the resource or drawable folder and then New -> Vector Asset is cool but if you want to add 100 icons, then manually doing this is not feasible. The easier solution is to add the material-extended icons library to your project and then simply refer to the required icons by Icons.Default.icon_name or Icons.Filled.icons_name etc. For this you need to add the extended material icons dependency to your module level build.gradle file.

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

Please note that this library is quite large (about 34MB). The official documentation says:

A separate library, androidx.compose.material:material-icons-extended, contains the full set of Material icons. Due to the very large size of this library, make sure to use R8/Proguard to strip unused icons if you are including this library as a direct dependency.

R8 and Proguard are both tools that can be used to strip unused icons from your app's APK file. R8 is the successor to Proguard and is generally considered to be more effective at stripping unused code.

To use R8 to strip unused icons, you need to add the following line to your app's build.gradle file:

buildFeatures {
    minifyEnabled true
    shrinkResources true
}

The minifyEnabled property tells R8 to minify your app's code, and the shrinkResources property tells R8 to strip unused resources, including icons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.