![Latest Version](https://img.shields.io/github/release/zavoloklom/material-design-iconic-font.svg?style=flat-square&label=latest version) ![Software License](https://img.shields.io/badge/license-MIT License/SIL OFL 1.1-blue.svg?style=flat-square)
Material Design Iconic Font is a full suite of official material design icons (created and maintained by Google), with additional community-designed and brands icons for easy scalable vector graphics on websites or desktop.
Material Design Icons are the official open-source icons featured in the Google Material Design specification.
Get started at http://zavoloklom.github.io/material-design-iconic-font
Upgrading from 1.x to 2.x at old docs http://zavoloklom.github.io/material-design-iconic-font/v1/
Issue with cheatsheet: If you think icons do not match the cheatsheet page, please read issue 47.
Download: 2.2.1 (ZIP)
Bower: bower install material-design-iconic-font
NPM: npm install material-design-iconic-font
EASY: CSS on CDNjs
Thanks to the cdnjs.cloudflare.com, you can use CDNjs to add MD Iconic Font into your website without downloading or installing anything!
- Paste the following code into the section of your site's HTML.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
- Check out the Examples pages to start using Material Design Iconic Font!
Use this method to get the default Material Design Iconic Font CSS.
- Download latest version of Material Design Iconic Font.
- Unpack the entire
material-design-iconic-font
archive into your project. - In the of your html, reference the location to your material-design-iconic-font.min.css.
<link rel="stylesheet" href="path/to/material-design-iconic-font/css/material-design-iconic-font.min.css">
- Check out the Examples pages to start using Material Design Iconic Font!
Use this method to customize Material Design Iconic Font using LESS or SCSS.
- Download latest version of Material Design Iconic Font.
- Unpack the entire
material-design-iconic-font
archive into your project. - Open your project's
path/to/material-design-iconic-font/less/variables.less
orpath/to/material-design-iconic-font/scss/_variables.scss
and edit the@zmdi-font-path
variable to point to your font directory.
@zmdi-font-path: "../fonts";
- You can change prefix
zmdi
to something else by editing@zmdi-icon-prefix
inpath/to/material-design-iconic-font/less/variables.less
orpath/to/material-design-iconic-font/scss/_variables.scss
@zmdi-icon-prefix: zmdi;
- Re-compile your LESS if using a static compiler.
- Check out the Examples pages to start using Material Design Iconic Font!
The full details of how Material Design Iconic Font is licensed and 'Thanks to' section: License page.
- Chrome 21+
- Firefox 22+
- Opera 12.1+
- Safari 6.1+
- IE 10+
- Android Browser 4.3+
- Not supported in Opera Mini
In fact it can work in earlier versions of browsers accordingly to caniuse.com portal (you can check ttf, woff, transform and animation properties), but i can't test it.
v2.2.1:
- add Microsoft Teams icon
v2.2.0:
- add 33 new icons
- change
main
section in bower.json - repair
seat
andgradient
icons - change class
zmdi-stack-overflow
tozmdi-stackoverflow
- change
google
,google-plus
,google-plus-box
andpaypal
icons
2.2.0 GitHub milestones
v2.1.2:
- add WOFF2 support
- remove 2.0 SVG icons files
- add EOT and SVG font files (not included in css)
2.1.2 GitHub milestones
v2.1.1:
- fix bugs in aliases LASS/SASS files
v2.1.0:
- change base font folder to "fonts"
- resort and rename icons for better search
- change variables prefix in LESS/SASS from
md-
tozmdi-
- change helper classes prefix in LESS/SASS from
zmd-
tozmdi-hc-
- change icons variables prefix in LESS/SASS from
md-iconset-
tozmdi-var-
- some changes with icons to make them look pixel perfect at 14px lie
- add some community icons
- add some new icons in directional and social sections
2.1.0 GitHub milestones
All changes in LESS/SASS/CSS has backward compatibility with 2.0.
If you use font as standalone font - you should update it carefully, because 2.1 ttf file cheat sheet hasn't backward compatibility with 2.0. Sorry for that, but in 2.0 was a bug that I couldn't remove without breaking backward compatibility.
v2.0.2:
- some minor changes in less/scss/css files for better icons display
v2.0.1:
- remove IE8-9 hooks
- fix "!default" to used properly way in sass code
2.0.1 GitHub milestones
v2.0.0:
- add new Google icons
- remove duplicated icons to reduce font size
- resort and rename icons for better search (no backward compatibility with old icon names)
- no support for IE7-8 (remove eot and svg font files)
- change icon-prefix to 'zmdi-' for capability with Angular JS
- add 'fixed-width', 'list' and 'stack' classes
- add "!default" to sass variables
- add vars with glyph codes to less/sass
- add nested pseudo classes for less/sass
2.0.0 GitHub milestones
Material Design Iconic Font will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:
<major>.<minor>.<patch>
And constructed with the following guidelines:
- New icons from Google or changes that breaking backward compatibility bumps the major (and resets the minor and patch)
- New additions, including new non-Google icons, without breaking backward compatibility bumps the minor (and resets the patch)
- Bug fixes and misc changes bumps the patch
For more information on SemVer, please visit http://semver.org.
- Email: [email protected]
- Twitter: https://twitter.com/zavoloklom/
- GitHub: https://github.com/zavoloklom/
- CodePen: http://codepen.io/zavoloklom/
- Dribble: https://dribbble.com/zavoloklom/