I've written about the process open sourcing MDI Light, but sometimes it's nice to see what the difference is visually.
There is still some work to get the
github setup with documentation. Until then you can preview the icons below.
Licensed under the SIL-OFL 1.1
Please let me know on twitter (@templarian) if you find any issues or want to give feedback.
To learn more please read the previous blog post.
Always nice to mention the CDN is graciously sponsored by MaxCDN.
If you follow my icon stuff a few years ago I released a
254 icon set called "Material Design Icons Light" to help fund Material Design Icons' open source efforts.
Shortly this icon pack will also become open source. The why is not too important, but it did not do as well as I had hoped and I would rather see people using it than not.
Built off a
24x24 grid the icons omit the top and right pixel columns to produce a single pixel stroke style.
Integration in the new MDI Site
These icons will be directly integrated into the new MaterialDesignIcons.com in several ways. To adapt to having two icon sets in the new site simply appending
/light will allow previewing MDI Light.
|Set||View All||Single Icon|
For those using the webfont with MDI they are familiar with the
mdi mdi-account syntax. To access MDI Light one can simply use
mdil mdil-account as the codepoints in the font will be mapped to the same values (technically
mdil mdi-account would work also).
Expanding MDI Light
Expanding MDI Light not a goal at the moment, but will be in a few months. The focus will be 100% on the new site and working toward 2000 icons for the
For those curious what it looks like for me to do this, it's manual, but I've built tooling for MDI that supports multiple font sets and other features.
Above I'm setting codepoint data for the release. Below is what MDI's codepoint looks like with more versions.
Hopefully will have this wrapped up shortly and can release it to everyone on GitHub/NPM/Bower.
Let me know ways this be expanded and be sure to checkout the MDI Collection of other helpful CodePens.
There are many ways to style Material Design Icons for your site or app. The write-up below will go over a few ideas for social media.
Above are some basic ideas for round and box social icons. It is also useful to bring attention to the various icons.
This article will expand over time as more ideas come along.
Be sure to checkout the MDI Collection of other helpful CodePens.