Create an icon font about material-design-icons HOT 130 CLOSED

Please skip SVG fonts in webpage loaders, since Chrome/Blink is dropping support for it; I don't see any need in browsers anymore.
Include WOFF2 when you get a chance please, since that seems to be the new hotness (Fx will support WOFF2 soonish).

from material-design-icons.

I didn't think about anything but web-pages, thanks for the reminder @Dzonatas [edited my post above for dropping SVG support for web only].

from material-design-icons.

Found this on https://www.reddit.com/r/MaterialDesign and just assumed it would be an icon font, since the icons are all monochrome. Was severely disappointed to find it as old school pngs.

Once this is an icon font, I can probably get rid of font awesome in my new stuff, especially things that implement https://material.angularjs.org/

from material-design-icons.

I too was hoping to see this be a web font like Font Awesome.

from material-design-icons.

@bbodenmiller, yeah... +1

from material-design-icons.

Unofficial fonts here: https://github.com/FezVrasta/bootstrap-material-design/tree/master/fonts
Demo: http://fezvrasta.github.io/bootstrap-material-design/ (scroll down)
Some like battery seem off. I few others I did compare with seem OK. I didn't check kerning, print optimization, etc.

from material-design-icons.

We're trying to make sure the Web font that gets released has high quality representations of all glyphs. Hang on in there and we'll hopefully have something to show soonish.

from material-design-icons.

Another unofficial version: http://zavoloklom.github.io/material-design-iconic-font/
Without bug with battery icons and css-styles like FontAwesome

from material-design-icons.

👍

from material-design-icons.

+1

from material-design-icons.

Looking forward to this!!

from material-design-icons.

👍

from material-design-icons.

👍 too

from material-design-icons.

Css classes like font awesome would go nicely with this.

from material-design-icons.

👍

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1 ... would be great

from material-design-icons.

+1

from material-design-icons.

Keep the +1s coming. I can't wait to share this font with you all...

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

Is there any eta on this?

from material-design-icons.

+1

Also, thanks @zavoloklom!

from material-design-icons.

+1

from material-design-icons.

+1. By the way, are you guys open to pull requests adding further icons (closely matching the current icon style of course)?

from material-design-icons.

... 👍

from material-design-icons.

👍

from material-design-icons.

+1

from material-design-icons.

👍

from material-design-icons.

+1 1x_ios has only 24_24 and 48_48 size, which are too small or too big in the UITabbar icon

from material-design-icons.

any update on this issue? you may at least provide an initial version and then improve it...

from material-design-icons.

👍

from material-design-icons.

👍

from material-design-icons.

👍

from material-design-icons.

The icons are superb, but is there any news on the icon font status? Several hints back in October (including this issue) and since then doesn't seem to have materialised 😉

Is it days away or more like weeks/months?

from material-design-icons.

Afaik, the icon font is close to being ready but I haven't heard an ETA for release. @jestelle might be able to provide more insight there.

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

Some ETA?

from material-design-icons.

I hope it will be soon because when I get here all I see is +1 and 👍

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

👍

from material-design-icons.

Same here @ScottRFrost

from material-design-icons.

any update? please this is an important feature :(

from material-design-icons.

+1

from material-design-icons.

Team are still away for the holidays. Assume we'll have more news go share a little ways into the new year :)

from material-design-icons.

Fontello is a good tool to generate icon fonts from svg icons.

from material-design-icons.

+1

from material-design-icons.

For the time being, I'm using https://icomoon.io/ - it's free and has all Material Design icons, you can add them to your library, and then export it as an icon font

from material-design-icons.

+1

from material-design-icons.

Don't bother with https://zavoloklom.github.io/material-design-iconic-font/icons.html as an alternative in the mean time.

It includes the unfortunate CSS selector: [class*=" md-"], [class^="md-"] { ... }

This breaks your regular font (normally roboto) for EVERYTHING with md-whatever in it.

from material-design-icons.

@ScottRFrost maybe you create a ticket at https://github.com/zavoloklom/material-design-iconic-font and maybe @zavoloklom will fix it

from material-design-icons.

@hebbet There's nothing actually wrong with Zavoloklom's icon font by itself, it just has a naming collision with classes also used by Angular Material.

from material-design-icons.

@ScottRFrost
You can change the prefix i use it with angular material just fine.

You can change prefix md to something else by editing @md-css-prefix in path/to/material-design-iconic-font/less/variables.less or path/to/material-design-iconic-font/scss/_variables.scss

On Jan 9, 2015 11:19 PM, "Scott R. Frost" [email protected] wrote:

@hebbet https://github.com/hebbet There's nothing actually wrong with
Zavoloklom's icon font by itself, it just has a naming collision with
classes also used by Angular Material.

—
Reply to this email directly or view it on GitHub
#1 (comment)
.

from material-design-icons.

+1

from material-design-icons.

The community version has a font. bower install mdi. It is still syncing all the stock icons in though.

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

+2 🙌

from material-design-icons.

I'm starting to wonder if the good folks at Google deliberately left out font icons. Is this part of an effort to encourage people use inline SVGs instead?

from material-design-icons.

@colinsteinmann That isn't the issue I'm sure. Since building out MaterialDesignIcons.com's font generation, I had to replace various icons due to their use of multiple layers. Font generation relies on there being a single path data (that is solid). They are probably targeting a v1.0 fully tested release instead of releasing a version missing the various icons.

from material-design-icons.

+1

from material-design-icons.

Leaving out icon fonts certainly wasn't intentional. Crafting a high performance icon font with individually optimised glyphs takes time. It is still coming though!

Please hang in there just a little while longer :)

from material-design-icons.

Do you have svg version of your fonts ?
if you have it i convert it simply if not someone own this task please

from material-design-icons.

@AliMD There are a ton of community tool-ported versions of the icon font generated from the SVG files. Whilst this is fine for some use-cases, we want something high-fidelity and low in size. Unfortunately most icon-font generation tools can't achieve this in an automated way we're happy with.

As we've said, the icon font is on its way :)

from material-design-icons.

+1 👍

from material-design-icons.

+1

from material-design-icons.

Any progress on this? Is it still in the works?

from material-design-icons.

I know you're all patiently waiting for this. We're getting close.
We just want to make sure we get everything right and really make this font great for you all.
Stay tuned.

from material-design-icons.

How long until it's downloadable

from material-design-icons.

I was originally waiting for the icon font to use with angular-material but it looks like svg iconsets might be a better and easier to use alternative to an icon font. I know for some that aren't using a framework like angular-material that might not be the case so I think both options would be great. But in the meantime official iconsets akin to this repo https://github.com/nkoterba/material-design-iconsets would be pretty nice too.

Relevant discussion: angular/material#1668
Relevant link: https://css-tricks.com/icon-fonts-vs-svg/

from material-design-icons.

👍 an icon-font would be super useful!

from material-design-icons.

@shannonmpoole I agree with you; likely you'll only use a few icons anyhow.

from material-design-icons.

SVG fonts don't work in Firefox or IE, or in Chrome on any platform other than Windows.
http://caniuse.com/#feat=svg-fonts

Font-Face works on everything IE8+
http://caniuse.com/#feat=fontface

In addition popular icon fonts (like Font Awesome) loaded from popular CDNs (like the BootstrapCDN) have a decent chance of already being in web browser caches.

from material-design-icons.

@ScottRFrost I'm not sure if that was in reference to my comment but an iconset would be very minimal effort since they are already structured properly within folders they just need to be concatenated and grouped within a single svg file per group. It also seems silly to me to have everyone pulling down all icons always (as a font) just for the sake of IE8 support. I am concerned however though that if only an icon font is provided that will be the most convenient method for a developer and therefore will be the most prevalent. Like I said I would like to see both options.

edit: btw an iconset is not an svg font face.

from material-design-icons.

@ScottRFrost A 'SVG Icon Set' is not the same as a 'SVG font'. It is equivalent to a PNG 'sprite sheet'.

Browser caching is a lottery, doubt it is even 3% for same version, CDN, not flushed, etc. Should never rely on it, unless you control a network of related sites (like Stack Overflow, engadget, etc).
Disclosure; I help out with jsDelvir CDN.

from material-design-icons.

+1

from material-design-icons.

👍

from material-design-icons.

+1

from material-design-icons.

plus one

from material-design-icons.

+1

from material-design-icons.

+1

from material-design-icons.

Some of the committers of Material Design for Bootstrap have improved recently the iconic font bundled with my theme. Now it shows correctly every icon, even the ones with transparency (batteries, signal etc).

http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

from material-design-icons.

@FezVrasta I had the same feature at one point in the community version, but removed it since the only icons that used the transparency layer are not very useful in a web app. Would definitely be nice to see in the official font though, and maybe in other icon designs (cough PayPal logo).

from material-design-icons.

@FezVrasta Maybe if you actually use a CDN to use your font only, as I don't want your elements at all. I would only like the font icon but you basically force us to use your 'framework'

from material-design-icons.

@youssefdetovernickr yes it would be a good idea but currently I've not time for it.

from material-design-icons.

+1

from material-design-icons.