Loading...

Templarian - Design, Develop, and Deploy


Next Page

Microsoft Build 2016

Text

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. <a href="https://creativemarket.com/templarian/348441-Material-Design-Icons-Light">Purchase at Creative Market</a> Usage is similar to Material Design Icons, but with the `mdi-light` prefix. ```html <span class="mdi-light mdi-light-account"></span> ```

Material Design Icons v1.1.34 Updates

This is a large update: 62 <a href="http://materialdesignicons.com/history">new</a> icons, <a href="http://maxcdn.com">MaxCDN</a> sponsored CDN, and the <a href="http://materialdesignicons.com/bootstrap">boostrap getting started</a> guide. That is not even the big news. Google IO was going on last week and did a serious update on their design tools. Along with a lot of additions around their stock icon set. The *62* new icons brings the total <a href="http://materialdesignicons.com/community">community</a> count up to *582* icons. Since there are _no_ breaking changes in v1.1.34 or any going forward the pack has lost the beta tag. This means as far as I know the set is *stable* for any of your production applications. I've been using them in production for the last month on client projects and it has gone smoothly. The CDN was requested constantly and was actually a feature I needed myself for use in <a href="http://codepen.io/templarian/pen/bdgoVQ?editors=110">codepen.io</a> examples. <a href="http://maxcdn.com">MaxCDN</a> that is sponsoring the CDN made the process very easy. !<a href="/files/material-design-cdn.png">MaxCDN</a> The below link can be used to access the recently released `1.1.34` webfont package. The root of each version contains the <a href="http://cdn.materialdesignicons.com/1.1.34/">preview</a> for that release. ```html <link rel="stylesheet" href="//cdn.materialdesignicons.com/1.1.34/css/materialdesignicons.min.css"> ``` One of the stories in my backlog for the last month has been building out a <a href="http://materialdesignicons.com/bootstrap">getting started</a> guide specific to <a href="http://getbootstrap.com/">Bootstrap</a> users. I work with bootstrap every day and while it's easy to plug the icons in having small snippets of CSS to quickly correct icon positioning can save a lot of time. Eventually these CSS rules will be adapted into the `materialdesignicons.css` stylesheet. For now to facilitate easier updates and bug fixes they will be separate. To say google has upgraded their design tools and documentation is an understatement. They have completely upgraded most of their guidelines and tools with the goal of speeding up development. The new <a href="https://www.google.com/design/icons/">icon page</a> is a good example of how a quick export option will greatly speed up developers. The design <a href="https://www.google.com/design/spec/style/icons.html#icons-system-icons">examples</a> for the system icons also got a pretty lengthy addition. This will ensure consistent icon additions. I'll be going through previous icons correcting them to match. !<a href="/files/material-design-alignment.png">Alignment</a> Google Design has added an additional 80 icons to the pack which will be added in this next release. Follow <a href="http://twitter.com/googledesign">GoogleDesign</a> on twitter to learn about new additions. It has been in the planning stages (and partially coding stage) for a while. The icon set is just growing at a rate that is not practical as a single webfont. The current release tops at 60kb for the woff2 compressed webfont. This is _only_ *1134* icons. Between Google Design adding new icons and the community users will need a way to produce smaller more tailored webfonts. Subsetting icons requires many new features to be added to the site. These new features are a few releases out, but with each release will become more important. With `289` issues closed and `107` <a href="https://github.com/Templarian/MaterialDesign/issues">open issues</a> there is a lot of things to talk about. Please `+1` any issue you like. Right now prioritization is completely biased to my judgement.