Material-design-icons: IconJar mapping file

[curthard89]

Hey guys,

Im the developer of http://geticonjar.com - wondered if you would like to provide a IconJar font mapping file for the webfont? As we support loading in icon fonts into IconJar, would be good to have the names correct. We can do this ourselves and build in the map into the app, but would be good to just have it available for anyone who downloads. IconJar is becoming very popular and would be good to see the "big boys" providing support for it. I can provide the instructions on how to create the file, its extremely straight forward (just a JSON file). Whats your thoughts?

Thanks
Curtis

[jestelle]

@curthard89 Thanks for reaching out. I haven't tried IconJar yet (I need to upgrade to Yosemite! =P), but I've heard many good things.

The best way you could help us support IconJar, is if you could give us a little script we could include in the repo that could generate your mapping file from things that exist within the repo already.

That way when we do big updates to the icons, we can re-run that script and easily update the mapping file.

Could you provide something like that?

[curthard89]

Hey - no worries, its possible I could parse the codepoints file, parse the name, remove the underscores and treat that as its name, basically the mapping file just maps the unicode to the name so it doesn't just show up with unicode's as the name, what language would you want it in (ideally)? Im a C, Object-C, PHP, JS guy :)

[shyndman]

Out of those languages, JS would be ideal.

The codepoints file isn't the way to go, because it omits several icons that are unavailable to the icon font (anything that has two colours). Probably best to draw from the svg/design directories. You may want to pick the 24px variant, as it is the most frequently used.

One of our designers has mentioned that a gripe with the software was that it ignores the invisible box around the icons (he still finds it super useful nonetheless). Does that mean anything to you? I'm trying to get more details now.

[shyndman]

Scratch that last bit. Problem was on our end. :)

[curthard89]

Ah ok (thats good to know, few)- im unsure about how to lookup a unicode against a file that doesn't have any relation to said unicode? This is just for mapping the TTF font against a name, nothing more, even if the mapping file contained unused codes, the application would never use it. The way it works is we physically load the font, loop through each plane of the font, work out if that character is in the set, if it as, then we use CoreText framework to give us back the path data, from that we generate an SVG which we then use at a later date to import. If there is a font-name.ijmap file in the same directory as the font, we simply at the import stage read that file and match up the unicodes we find in the character set from the font against the name in the map file and store that name.

[shyndman]

Oh, I see. I misunderstood. If you're looking to use the icon font as the source, the codepoints file is the way to go.

Out of curiosity, why use the font when we have the SVGs available?

[curthard89]

Its just a nicety - gives people the option, users are currently importing all 72k icons in and would rather just say, hey, just import the font. Saves them looking through folders trying to find each type. Icon fonts were a massive request for us - I know a few companies that just have an in-house font without having source for the SVG so it was a must to support. Its just self contained and extremely simple to import as we do all the heavy lifting, plus if you copy from our app we will keep the unicode on the pasteboard for developers (I personally use font awesome at my day job and this helped me a lot just being able to search and copy the unicode to use in the CSS) - should I still use JS (guessing node)? or would another language be more suitable if running from the file system?

[shyndman]

Got it. Makes sense. node would be great.

One request - it's important with these icons that the correct padding is displayed around them. Could you make sure that when you extract the path data from the glyphs that you generate an appropriate box size based on the glyph's metrics (or make the assumption that they're 24x24)?

Thanks for your help!

[curthard89]

Were going to look into the padding issue, not sure if a font provides us with the required padding around each icon, soon find out.

Here is a gist of the file you can run, basically just stick this in the same dir as the font and it will create the desired correctly named mapping file which happily works:

https://gist.github.com/curthard89/f310638bfec40cfbed42

Should be pretty self explanatory - my Node is a little rusty.

[shyndman]

Mind forking, popping the file into the /iconfont directory and submitting a PR? I'll give you a proper code review.

Googlebot _should_ pipe in to get you to agree to the contributor licensing agreement, but if it doesn't I'll look into getting it set up with this repo.

[curthard89]

Sure! Just updated the code and submitted a pull request, the Googlebot didn't kick in though :(

[curthard89]

Submitted - the commits went a bit awol, some reason local was always out of date when I tried to sort out the signing. But I did the best I could, tried to squash the commits but again, was always behind from master. I believe its all gone through correct with Googlebot.

[curthard89]

Ok - resubmitted it all again, should be ok now, seems like its been accepted :)

[plainspace]

Is there an iconjar file to import the icons?

[shyndman]

There's an ijmap in here: https://github.com/google/material-design-icons/tree/master/iconfont

Is that what you need?

[plainspace]

hmm... I really want an iconjar file... i'll try it though.

[builtbylane]

@jestelle https://github.com/gabyprado/material-icons-iconjar

[pglevy]

I was getting set up with iconjar and came across this. The nice thing about the TTF is that you can create symbols in Sketch with different text in each instance. So, for example, you can have a "media object" symbol and just paste the different characters from the icon font without affecting the symbol. But thanks @jestelle! This helps!

[nextriot]

Is there anyway that the iconjar file could organise the icons by there respective categories - actions, maps etc.?

[curthard89]

As long as the IconJar file was exported with the correct hierarchy it should import just fine with each subset and group...

When importing into IconJar, make sure the "Automatically create sets and groups for subfolders" is enabled, this will sort out the hierarchy and naming when importing any icons (that reside in folders), then you can just export the top level group which will keep the order under it :)