Google's Material Design Icon Font Widget Library for V7+ (Icon Fonts)

rp-7
#1

After many hours of copy and pasting, I decided to create a widget library of Google’s material design icon font, similar to Paul’s Font awesome library which I have been using A LOT :slight_smile: - thanx Paul :bow:

Anyways…here it is…I hope you guys like it.

Download: materialIcons.rplib (4.75 MB)

Download font file for local use


(Click the font file type you want (e.g. TTF) and click view raw to download it)

The CSS link for including the font as webfonts in your project

https://fonts.googleapis.com/icon?family=Material+Icons

[COLOR="#FFFFFF"]-----How to use webfonts in Axure projects
-----1. Click Publish->Generate HTML Files…
-----2. Click Web Fonts
-----3. Click ‘+’
-----4. Paste the above link in the ‘URL’ field
------- Done
[/COLOR]

Note
The naming of the icons and the sorting of them is a 1:1 match to Google’s icon library. Therefore, some icons might looks the same, but are in fact different (at least in terms of unicode).

I will work on adding additional search phrases on the icon titles in the future so they are easier to search for in Axure.

All icons included as of Jun 29, 2015

If you like it, please hit the thanks button :thumbup:

#2

Like it a lot!

How did you find the web font?
It does not appear when searching for “material” or “icon” in https://www.google.com/fonts.

#3

Took a bit of detective work :slight_smile: But it was easy to locate once I found their github repository :wink:

#4

Thanks. Very useful.

#5

I know I’m going to sound like a complete dope here, but where is the font? I tried the link and it listed a number of files, but what I was looking for wasn’t obvious. I tried clicking for the ttf and then clicking ‘View Raw’ and the file that downloaded was blank (ttf but no glyphs). I obviously know that said file is the property of Google, not anyone here, just wondering how anyone else got the file onto their local machine to make the library work.

I’m on Mac using OS X 10.8

#6

You need to download and install the font locally for it to work…On Windows you can right click the file and select install

For Mac you can follow this guide: How do I install fonts on my Mac? | Fontspring

#7

I know how to install fonts on a mac.

My issue is, like I said, when I click on the link for the ttf (By following the link in the OP), I am presented with no file, but a link to ‘View Raw’. When I click on this link, a ttf file downloads automatically. This process is the same for both Mac and if I use my Windows network desktop. When I open the ttf in Windows, there are characters (Well, just a capital T, but that’s something at least) but when I open the same file from the same location on OS X, no characters.

Before anyone suggests it, I can’t use Axure on Windows. I work mainly on a mac and do not have a thick client (Runs a locally installed OS, not a networked desktop from startup) PC that I can use my second Axure licensed install on, so I can’t check the file with Axure on PC.

I’m reckoning my issue is going to be one of two things.

  1. Firewall - so I can’t see a file that others can. Could another user please confirm/correct this assumption based on the steps described above.

  2. The file is not mac-friendly. Has anyone else successfully got the font to install and work on a mac? If so, how?

#8

I was also tearing my hair out with this one for a while, downloading from different browsers, different operating systems, different networks, etc. It turns out… you just need to trust that it’s installing. When I opened the .ttf file on my Mac, I also got a totally blank font. And when I opened up Axure RP, the font was listed simply as "M I "–I only found it by manually typing “Material Icons”.

Then, to make sure it was actually working, I added an H1 widget, set the font, and started typing “airline_seat_legroom_normal”. Sure enough, the correct icon eventually showed up. It’s a pretty bizarre experience.

It looks like the Material Icons font doesn’t actually contain any standard character glyphs–it’s all defined by ligatures that appear with natural language, e.g. “local_laundry_service”. It’s totally different from something like FontAwesome, which has a standard alphabet in addition to a bunch of glyphs defined by highly specific strings.

Try installing it and then typing some of the icon names listed here:

#9

Dear God… >_<

Thanks Jonathan. That’s working. Good to know that I’m not losing grip on technology quite yet.

Also. Dear Google,

Please go back and make your font better. Like FontAwesome. It is currently a huge heap of unintuitive AAAAAAGH!

[EDIT] @biofryd - Awesome work on the library; now that I can actually see the damned thing. Stupid Google Icon Font… :wink:

#10

Hi - I downloaded RP file - loaded the library, when dragging the icon I get blank box. Let me preface - I’m completely new at all of these so I’m learning as I go. Appreciate any guidance. thanks

#11

Have you installed the font locally? The library is based on the actual font. If you don’t have that installed on you machine, then you wont be able to see the icons.

You can download the font here https://github.com/google/material-design-icons/tree/master/iconfont -> click on e.g. the .tff file and the click “view raw”, this will download the file. If you are on a windows machine, right click the font at select install. Restart Axure, and now you should be able to see the icons.

#12

Thanks - I tried it and I get an error message this is not valid font. I’ll keep playing around though with it…

#13

Hello!

I’m trying to install the font (.TTF), but it is no working. It keeps presenting the error “not valid file”


What am I missing?

Thanks in advance!

#14

Hi gintoki,

Given this particular error message, it seems possibly attributed more to the specific computer than the font file itself. There’s really a range of possible factors, many hinging on specific security settings.

As a test, could you try using an administrator user account on your Windows computer, to try installing and using the font from there? I’d also keep an eye out for any security tools in your environment or even from the web browsers as you download.

Other web resources related to this specific error have suggested using some font converters to get it in a working state, too.

#15

This is awesome, thank you!

#16

Thank you soooooo much!

#17

Hey, I hope this helps everyone. I found an open source project which uses the Google Material Icons plus a whole lot more from other designers.

https://materialdesignicons.com

They offer local font files, svg, css, and they have a CDN. It’s amazing. The best part, you can see the fonts in Font Book.

#18

I’ve tried applying the widget style from the Material Icons library to existing widgets, but this causes a problem. In Firefox on localhost things look fine, but in Safari and on other devices, the icons are not displayed. It has something to do with the .material-icons CSS style that Google hosts - if I manually add it with the inspector, my icon is shown. Also, when I add a widget from the library to my project, it is displayed correctly on all systems.

What makes the widgets special? Is there a way to convert the widgets that currently have FontAwesome icons into Material design icons? Replacing the existing widgets with Material Icon widgets means I’d have to change lots of interaction (and there is no easy way to find out which ones).

#19

tl;dr: just applying the wizard style from the library to other widgets doesn’t work. Why not?

I’ve tried applying the widget style from the Material Icons library to existing widgets, but this causes a problem. In Firefox on localhost things look fine, but in Safari and on other devices, the icons are not displayed. It has something to do with the .material-icons CSS style that Google hosts - if I manually add it with Safari’s inspector, my icon is shown. Also, when I add a widget from the library to my project, it is displayed correctly on all systems!

So kudos for making the widgets work so well. What makes the widgets special though? Is there a way to convert the widgets that currently have FontAwesome icons into Material design icons? Replacing the existing widgets with Material Icon widgets means I’d have to change lots of interaction (and there is no easy way to find out which ones).

Update: I just found out the following that the icons only show up in widgets that I created myself and if the widget has auto height and auto width in its properties. Strangely, if I turn of those properties of a widget dragged from the Material Icons library (by resizing the widget), this doesn’t impact visibility of the icon.

#20

Hi kslstn,

Per our related thread, re-mapping icon fonts may be moving beyond RP’s current scope at the moment. (Albeit I’ve seen some articles that might convey what might be needed for that kind of undertaking.) Nonetheless, regarding your update, if you could post a sample RP file that demonstrates the bug, we’d be happy to test it and use it for reference in related issues. Thanks!