Import material design icons into an android project

Question

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?

Betide

Answer 1

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

Govan

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" – Rubellite

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! :-) – Rubellite

This is probably the best solution – Othelia

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. – Ley

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… – Mainmast

This is a great answer - bundled with Android Studio, and very flexible and convenient. Thanks! – Bandog

I've been trying to figure out the procedure to add the icon from within android studio, this proves to be a great post on that – Homoeroticism

recent vector asset studio has a clip art type instead of material icon, click the android icon below there to choose your icon – Gambrel

This doesn't answer the question. If you want to add 100 different icons, will you add all of them manually by clicking on the Add New Vector Asset? Actually you can import the material-extended library into your project dependency and then refer to the required icons using Icons.Default.icon_name. – Idealize

Answer 2

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

Vitriolize

Answer 3

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

Islet

I've installed it, but how do I use it? – Flagstone

@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. – Pietje

@MartynDavis thanks. I found it though. What I like the most about it is the fact that I can choose the color too. – Flagstone

Answer 4

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.

#!/bin/bash
# WF 2016-06-04
# get google material design icons
# see https://mcmap.net/q/135019/-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

Lengthen

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. – Cherisecherish

Answer 5

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>

Zitella

Answer 6

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 !

Catcall

Answer 7

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.

Idealize