Templarian - Design, Develop, and Deploy

Next Page

Material Design Icons History

This weekend <a href="http://materialdesignicons.com">Material Design Icons</a> got updated with a new <a href="http://materialdesignicons.com/history">history</a> page that will detail all the additions to the pack and various milestones. !<a href="/files/mdi-history-viewer.png">History</a> 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. !<a href="/files/mdi-history-compare.png">Compare</a> One last update a little off topic, the twitter account <a href="https://twitter.com/MaterialIcons">MaterialIcons</a> is now active, so be sure to follow it for updates. !<a href="/files/mdi-twitter-banner.png">twitter</a> Thanks to those that submitted bugs. Please submit any issues you find or icon requests to the <a href="https://github.com/Templarian/MaterialDesign/issues">issue</a> 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` <a href="https://github.com/sapegin/grunt-webfont">grunt package</a>. 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 <a href="https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip">direct download</a>. !<a href="/files/mdi-webfont-preview.png">Preview</a> *Note:* The SVG files that can be downloaded by right clicking on an icon in <a href="http://materialdesignicons.com">MaterialDesignIcons.com</a> 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 <a href="http://materialdesignicons.com/contributor/REJack">contributor</a> has joined, <a href="https://github.com/rejack">REjack</a>, so keep the icon <a href="https://github.com/Templarian/MaterialDesign/issues">requests</a> coming.

Icon Path Optimization

The <a href="http://materialdesignicons.com">Material Design Icons</a> 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.