Open Sourcing MDI Light

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.

Material Design Icons Light

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 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
MDI /icons /icon/account
MDI Light /icons/light /icon/account/light

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 v2.0.0 release.


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.

MDI - Social Media Icon Ideas

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.

See the Pen MDI - Round Social Icons by Austin Andrews (@templarian) on CodePen.

Above are some basic ideas for round and box social icons. It is also useful to bring attention to the various icons.

See the Pen MDI - Social Media Examples 2 by Austin Andrews (@templarian) on CodePen.

This article will expand over time as more ideas come along.

Be sure to checkout the MDI Collection of other helpful CodePens.

Material Design Icons v1.8.36

For latest v1.8.36 Material Design Icons release we've added 114 new icons. A few icons got fixed, replaced, and renamed. But general functionality is the same as the previous release and there should be very little impact upgrading.

As the new site is being worked on there will be more releases slowly leading up to the new site's debut.

New CSS Features.

Along with the 90, 180, 270, there are now degrees for every 45 angle using mdi-rotate-* classes.

Icons will not inherit their container's line-height allowing for quicker formatting in various frameworks.