CODEWITHSUNDEEP
iconsmaterial-design
Ivan Aranibar
Ivan Aranibar

Reputation: 2286

Import material design icons into an android project

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?

Upvotes: 190

Views: 130129

Answers (7)

Binu Jasim
Binu Jasim

Reputation: 355

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.

Upvotes: 4

Gremi64
Gremi64

Reputation: 1677

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 !

Upvotes: 2

mpkuth
mpkuth

Reputation: 7129

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

Upvotes: 446

Dale
Dale

Reputation: 5785

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

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

Upvotes: 40

Naveed Jamali
Naveed Jamali

Reputation: 668

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>

Upvotes: 4

Wolfgang Fahl
Wolfgang Fahl

Reputation: 15769

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

Upvotes: 8

Oussama Haff.
Oussama Haff.

Reputation: 604

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

Upvotes: 24

Related Questions