Icons

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.

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.

While I am working on the new site for Material Design Icons I have been looking at the stats to best tailor the layout and features around the most used features. Thought it would be fun to share some of those stats and what's in store for 2017.

Contributors

We added so many contributors this year, not only for icon contributions, but those helping manage the hundreds of issues. The metric here is that most contributors have stuck around consistently helping with icons. Thanks, at this point it would be near impossible to do this without your help.

Since the new site is open source we'll hopefully see a lot more contributor opportunities (including writing the new getting started guides).

Most Searched / View Icons

For me the most useful stat is seeing what users are searching for. The site contains an alias for a lot of icons and I use these search results to map icons better with the expected result.

For instance since arrow is the top result for the year the next release actually contains a few more arrow icons.

Searched Term.......    Icon View...............
1  arrow     (1.83%)    account          (1.76%)
2  plus      (1.78%)    magnify          (1.43%)
3  check     (1.73%)    plus             (1.18%)
4  close     (1.51%)    settings         (1.18%)
5  search    (1.33%)    facebook-box     (1.06%)
6  account   (1.27%)    close            (0.98%)
7  phone     (1.18%)    check            (0.93%)
8  home      (1.13%)    map-marker       (0.87%)
9  menu      (0.97%)    menu             (0.82%)
10 facebook  (0.95%)    delete           (0.72%)
11 star      (0.95%)    facebook         (0.71%)
12 map       (0.93%)    home             (0.71%)
13 calendar  (0.93%)    email            (0.65%)
14 delete    (0.82%)    arrow-left       (0.63%)
15 file      (0.81%)    phone            (0.62%)
16 mail      (0.80%)    account-multiple (0.61%)
17 play      (0.80%)    account-circle   (0.61%)
18 info      (0.80%)    dots-vertical    (0.57%)
19 filter    (0.77%)    pencil           (0.56%)
20 list      (0.76%)    star             (0.54%)

Big Numbers

The site contained 1,550,000 sessions for the year with 62.3% returning visitors. This means people are using the icon pack and coming back. This is amazing even as we've greately expanded the preview file included in the download that offers a lot of similar data.

NPM is also showing over 10,000 downloads a month. Bower does not track downloads, but can assume it is similar.

Chrome / Firefox Addons

The Material Icons Picker extension for Chrome that not many know about will get some more visibility in the new site. Maintained by @chteuchteu using the open data (meta.json) provided by the CDN.

Download for Chrome Download for Firefox

Plans for 2017

Very close to releasing the next version (with almost 100 new icons), but for me 2017 will be getting the new site online.

If you want to help view the issue tab and give feedback on the new site's features. We can always use help creating icons also, plus you could become a contributor!

This release includes 10 new icons, but is focused on SCSS related changes reverting some style changes and adding new style changes to the Bootstrap documentation.

TL;DR If you're using v1.7.22 icons with Bootstrap, you'll want to update the helper CSS classes: https://materialdesignicons.com/bootstrap

For instance in the last release this syntax will now work. The documentation and css on that page have been updated to also support this.

<button type="button" class="btn btn-default" aria-label="Flask">
    <i class="mdi mdi-flask" aria-hidden="true"></i>
    btn
</button>
<!-- OR -->
<button type="button" class="btn btn-default mdi mdi-flask" aria-label="Flask">
    btn
</button>

Hopefully this doesn't cause too much of a headache. Going forward it should be a beneficial change, but could be annoying for those upgrading 1.6.x -> 1.7.22.

Preview the latest on the CDN: https://cdn.materialdesignicons.com/1.7.22/

This is a pretty standard release, with 62 new icons and a handful of changes. There are two new features in this release and an update to the bower.json file to follow the current spec.

Feature one is focused on moving to a cleaner font-family declaration. The new .mdi-set class will work the same way as .mdi did previously for uses where more than one icon is needed.

.mdi:before,
.mdi-set {
    ...
}

The CodePen shows the way these two classes can be used from now on.

Feature two is a little more minor adding a mdi-blank icon that has been requested several times. This is actually just the mdi-solid icon with visability: hidden.

The last update is a bit more subtle and fixes the way bower.json is structured. Read more about that in the issue.

At 950 closed issue requests the contributors have done an amazing job! Great to see so much interest in the community to help out fellow designers and importantly developers.

Preview on the CDN View the WIP Design Page

Community meta.json

The new meta.json file contains all the meta data we have about each icon and will be included in the release going forward for 3rd party tools to take advantage of.

Chrome / Firefox Extension

One great example of this new data is the Chrome Extension MaterialDesignIcons Picker it is awesome! Also available in Firefox. Created by the talented @chteuchteu.