Material Design Icons History

This weekend Material Design Icons got updated with a new history page that will detail all the additions to the pack and various milestones.

History

Most importantly this page will inform users of icon modification in between the webfont releases.

Changes to existing icons are represented by a light purple. These entries have a compare button to see a before and after along with a visual overlay of the two icons. Often icon changes are subtle, so the overlay will make these changes much more obvious than a side by side comparison.

Compare

One last update a little off topic, the twitter account MaterialIcons is now active, so be sure to follow it for updates.

twitter

Thanks to those that submitted bugs. Please submit any issues you find or icon requests to the issue tracker on GitHub.

Material Design Icons Webfont Updates

Starting with version 0.7.33-alpha the webfont has been rewritten. This new font generation makes use of the node only compilation possible in the grunt-webfont grunt package. This means that once I release the download link for the webfont safe SVG files any user can compile their own subset of fonts locally.

bower install mdi and view the preview.html or direct download.

Preview

Note: The SVG files that can be downloaded by right clicking on an icon in MaterialDesignIcons.com will not work. This is due to optimization steps that convert to SVG only features (most notably the arc ability that cuts down the file size 20 percent). The grunt-webfont generator relies on outside open source packages that do not support this specific command.

Alpha Status: Just a reminder this is all still in alpha. While stable, expect icons to be renamed without notice.

I'll start working on the tutorial today on how to compile subsets of the font yourself. Eventually the site will support this feature also, but requires a bit of coding time.

One last note a new contributor has joined, REjack, so keep the icon requests coming.

Icon Path Optimization

The Material Design Icons had an issue that all path data was simply being compressed and not optimized. Points were rounded, but curves were not correctly converted to arcs. A curve like C2,2.9 2.9,2 4,2 is actually a perfect arc and should be A2,2 0 0,1 4,2.

This operation over 684 icons accounts for a lot of unneeded decimal points. All these characters accounted for a 20% reduction in all path data. Moreover each font dropped in size. WOFF 1%, TTF 12%, and EOT 12%. The WOFF is already heavily compressed and saw a marginal drop from this operation.

Other optimizations are planned in the future, but this will be one of the more significant updates. Future scripts will correct for unneeded points seen in circles and line segments left by designers during the creation of the icon.

Optimizing Round Edges in SVG

In the process of building out Material Design Icons I have learned a lot more about how path data can be optimized. One of the fascinating things is how the various editors export SVG path data.

While a few softwares do optimize, many do not. Simple optimizations include converting curves (C) to arcs (A) and lines to vertical (V) or horiontal (H) commands.

For instance take the simple path below. The path contains one curved corner with 90 degree angles for all others.

# Plain, 49 Characters
M4,2L22,2L22,22L2,22L2,4C2,2.89543 2.89543,2 4,2Z
# Plain Rounded, 41 Characters
M4,2L22,2L22,22L2,22L2,4C2,2.9 2.9,2 4,2Z
# Curve to Arc, 39 Characters
M4,2L22,2L22,22L2,22L2,4A2,2 0 0,1 4,2Z
# Horizontal / Vertical, 29 Characters
M4,2H22V22H2V4A2,2 0 0,1 4,2Z

This assumes that the first step is stripped of all extra spaces or commas.

Output

After some testing I've noticed that editors use two different values while calculating curves rounded edges. Adobe Illustrator uses radius * .45 on absolute paths while everything else uses math to calculate the absolute curve radius * .447715 (cubic curve .5522 if it were not absolutely positioned to the top left).

Weather Icons

Yesterday and today I spent some time focusing on adding weather icons. The trouble with weather icons is that there are so many. Below is the start of this endeavor, and I am sure there will be many more requests for the others.

Weather Icons

Each icon uses the 2dp line for consistency with rounded end caps.

Sizing

You can download these and many other community added icons at MaterialDesignIcons.com. Also be sure to checkout the new addition to the site in Android 5.0 package; which includes Vector Drawables.

Edit: Kelvin has been fixed to not include the degree symbol.