Material Design Icons v1.7.22

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/

Material Design Icons v1.7.12

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.

Issues

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.

Modern Day Hieroglyphics

Was lucky enough to be a speaker at Grand Rapids Dev Day this year (March 12). The talk is setup for a 30 minute session to give developers an overview on iconography.


Slide 1

Introduction slide. Giving those waiting for the talk to look at some icons in 2 different styles.

Slide 2

What really makes a pictogram is the ability for it to be quickly recognized. Here in the talk I go into ambiguity and the ways people might interpret an icon in certain contexts.

Slide 3

Explaining the difference between a logo and a system icon. This talk primarily focuses on the use of system icons.

Slide 4

So, the talk is about modern day icons and how and why we use them. The key to their use is for them to make the action or elements quicker to recognize. There is the idea of using icons to represent categories and for larger applications icons can also mix into the branding.

Slide 5

Quickly recognized icons we're familiar with. The save icon, which lets us save 1.44MB of data. And the file icon which when pressed takes your digital document and turns it into a piece of paper I assume.

Slide 6

More serious slide, quickly recognizable icons can by themselves represent the action without text or tooltips. A common example seen in many applications now-a-days is the fly out menu.

Slide 7

Screen space especially on mobile devices is more limited and showing category defining data on each item with text can add clutter. One way around this is to use icons. Files / Folders, People / Groups, and Important Items can be represented this way. Categories can also be top level navigation items or filters as seen in a permission screen.

Slide 8

Branding is one slide I could talk about for a while, but will keep this brief. Branded icons are icons that fit a consistent style, but do not match the operating system's built in guidelines. This is usually not recommended, but can be done for applications with a strong brand recognition. Skype, Office, and Facebook have this, while others will opt for consistency with the OS.

Slide 9

We now have a high level overview of icons, but what makes up a good icon. To understand this we start with the base guidelines that all icons start with. This are determined by the style and built around a grid. In this case we're going to use Material Design to illustrate this. Material Design system icons are built on a 24dp (display pixel) grid.

Slide 10

One quick concept when working with icons to grasp is the idea of proportions. Each icon takes up a certain area of the grid, but for them to view in a uniform way vertically and horizontally next to each other they may need to fill out the grid differently. A good example of this is a circle and a square, visually they look uniform, but the circle is taller and wider.

Slide 11

To extend more on this idea of uniformity lets look into each of the ways an icon can be consistent. This slide is self explanatory, but know that icons can work together if all of these don't match. The most important ones are width, curves, and fill/stroke. To make things easy most icon packs ship with a uniform style, but keep these in mind if cases when a 3rd party icon needs to be adapted where the pack is missing a specifically needed icon.

Slide 12

Now a lot of people work in web, and there are two main ways you can make use of icons. Not going into which is better or worse, but just how to use them and how they work. Webfonts are becoming the norm for including many icons and making quick use. This works by taking advantage of the Private Use Area of the unicode spec. A font can include 6,400 user defined characters. The next is SVG or Scalable Vector Graphics which are supported now in all major browsers and can be inline included with the <svg /> tag or referenced via the <img /> tag.

Slide 13

Webfonts like 'Font Awesome' and 'Material Design Icons' allow quick inclusion into a page, but require loading every icon, so are less ideal when only a handful of icons are required.

Slide 14

Scalable Vector Graphics have a nice advantage in that they can be included inline either by hand our by third party JavaScript libraries and styled via CSS.

Slide 15

Touching on accessibility really quick before diving into more designer topics. Remembering that visually impaired users will not be able to see your icons it will be important to add some accessibility markup. This can be done a few ways aria-label lets you reword whatever is in a button with a custom description. Ligatures are not ideal, but some webfonts support them and is the idea that letters next to one another should be represented by another unicode. In this example Plus would swap for the webfont's plus symbol. In a lot of cases an icon is a representation of an action and not the noun, so this can add confusion. The more ideal solution is to use sr-only markup as seen in the Bootstrap framework.

Slide 16

Self explanatory slide of all the terms I'll be using in the demo and how they relate to vector objects.

Slide 17

The demo details the process one would go through working with a designer or the steps a developer can take to create an icon.

Material Design Icons v1.6.50

The release for v1.6.50 was announced today and can now be downloaded. This is a pretty nice update and includes around 100 icons, 20 various icon fixes, and some new SCSS file improvements.

npm install mdi  
bower install mdi  

Like always this release could not have been done without all the work from the contributors on the team. Impossible to do this without them as the project has scaled in scope and users.

This is one of the rare releases that comes with breaking changes to those using the SCSS files. To make things easier from now on the _icons.scss contains only the loop logic, while the actual icon list is in _variables.scss.

@each $key, $value in $mdi-icons {
    .#{$mdi-css-prefix}-#{$key}:before {
        content: char($value);
    }
}

Thanks for all those that helped out in this release and will be starting on some of the high priority issues shortly after taking a break.

Material Design Icons Light

Material Design Icons Light is a light variant of the Material Design Icons. The first release contains over 250 icons and will gradually expand to include the most commonly used icons.

Purchase at Creative Market

Preview

To make sizing easier icons are restyled assuming the top and right 1px edge does not exist.

Size

Usage is similar to Material Design Icons, but with the mdi-light prefix.

<span class="mdi-light mdi-light-account"></span>  

Full Set

Hopefully I will find some time to add new icons to this collection.