Material Design Icons packaged as an Android library.
Material Design Icons are the official open-source icons featured in the Google Material Design specification.
IMPORTANT
When using this library use minifyEnabled
and shrinkResources
to prevent adding the entire ~36MB of resources in this library to your APK.
android {
buildTypes {
release {
minifyEnabled true
shrinkResources true
}
}
}
Additionally, including the entire icon set can burden your build system and IDE. It's preferred to use the depenencies for inidividual icon categories rather than the entire icon set.
- SVG versions of all icons in both 24px and 48px flavours
- SVG and CSS sprites of all icons
- 1x, 2x icons targeted at the Web (PNG)
- 1x, 2x, 3x icons targeted at iOS (PNG)
- Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)
A live preview of the icon set is available.
You have a few options for getting the icons.
<dependency>
<groupId>com.michaelpardo</groupId>
<artifactId>materialdesignicons(-[category])</artifactId>
<version>1.0.0</version>
</dependency>
// All categories
compile 'com.michaelpardo:materialdesignicons:1.0.0'
// Individual categories
compile 'com.michaelpardo:materialdesignicons-action:1.0.0'
compile 'com.michaelpardo:materialdesignicons-alert:1.0.0'
compile 'com.michaelpardo:materialdesignicons-av:1.0.0'
...
Grab the latest stable zip archive (~57MB) of all icons or the bleeding-edge version from master.
Install the icons using the Bower package manager.
$ bower install material-design-icons
You can also find all the icons on npm.
$ npm install material-design-icons
Take a look at the included index.html
file for a preview of all icons included in the set. You are free to use the icons in the way that makes most sense to your project.
In general, an icon category (e.g action
) will include the following directories, containing multiple resolutions of our icons.
- 1x, 2x Web
- 1x, 2x, 3x iOS
- drawable hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi
- svg
Decide on the icon resolution required for your project and copy, then reference the icons you wish to use.
Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites
directory, under svg-sprite
and css-sprite
.
To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g to use one of the play icons in css-sprite-av
:
Reference the stylesheet:
<link href="css-sprite/sprite-av-black.css" rel="stylesheet">
Create an element which will use the icon as a background:
<div></div>
Add a class referencing the icon
spritesheet and specific icon icon-ic_play_circle_outline_black_24dp
, which you can get from the above stylesheet.
<div class="icon icon-ic_play_circle_outline_black_24dp"></div>
That's it!
Don't forget to publish the corresponding CSS and SVG/PNG files when deploying your project.
Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.
E.g: to use one of the play icons in svg-sprite-av
, reference the stylesheet:
<link href="svg-sprite/svg-sprite-av.css" rel="stylesheet">
Create an element which will use the icon as a background:
<div></div>
Next, make sure to set a dimension for the icon. This can either be done inline or via a class. We'll use a class for this example:
<style>
.svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
</style>
Finally, set the dimension and specific icon svg-ic_play_circle_outline_24px
, which you can get from the above stylesheet.
<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"></div>
All icons are released under an Attribution 4.0 International license.