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

rp-7
#21

For some reason my browsers (Edge, Chrome, Firefox) will not display the material design icons even after I included the CSS link to the webfont. However, FontAwesome works just fine. I also tried manually typing in the @fontface text to no avail.

Any suggestions?

Capture.JPG645×640 36.1 KB

#22

You aren’t using the correct font name. Use ‘Material Icons’.

#23

Thanks for the tip, James. I changed the name but unfortunately it still doesn’t seem to be working.

EDIT: I just tested it once more and the icons do appear in Firefox and in Safari on my iPhone, but not in Google Chrome (desktop) or Microsoft Edge. Additionally, the icons are not in the appropriate location when viewing on my iPhone; they seem to be offset quite a bit.

#24

I know I have issues with locally generated prototypes due to the company firewall, which are then solved by hosting the prototype on AxShare (Use a password if you need security).

But your link is the same as the one I use and it works fine for me on all the browsers I’ve tested.

#25

Hi drfitn3ss,

That’s really odd. Would you mind posting your RP file? Sounds like everything’s correct; happy to look it over, though. At a later point, it may be helpful to check for any errors in Google Chrome’s console tab, on your desktop. One way to access that is by right-clicking on the browser page, and selecting “Inspect” then the “Console” tab. Seeing the RP would be good to see first, though; could you share your AxShare URL, too? Thanks!

#26

Thanks for looking into this, Alex! Can I send the file to you in a message? I’m not sure that I’m allowed to share publicly.

#27

Hi drfitn3ss,

The best way would be to email us at support@axure.com with the file. Could you send that over as an attachment and include a link to this forum thread in your email body? Let me know; thanks! :slight_smile:

#28

Thanks for your patience! I have finally made a test file containing different ways in which I add the icons. The example is published here on AxShare. As you can see, not all icons show up in Safari and on Android devices.

Edit: I checked on a Windows VM without the icon font installed and found that it works correctly on Firefox, but that IE 11 only shows the first icon, like on my Android devices.
Material Icons Test.rp (55.4 KB)

#29

Hi kslstn,

Thanks for providing the RP file–I’m seeing the same icon discrepancies between browsers. I’m not yet sure if this is a bug or a conflict with browser-compatibility, but I’m going to get this filed with our QA so that they can further investigate the issue.

For now, dragging the icons from the Widget Library should help to render the icons consistently across all browsers. It also looks like version 8.0 is showing better results (for Chrome), which is definitely good news.

Thanks for sleuthing this! :slight_smile:

#30

I followed the instructions but I cannot change the color of the icons or their dimensions/size. Is there something else that I have to do to accomplish that?

#31

Hi acnow,

The icons are text, so you’ll want to use the Font Size dropdown to change their size and the Text Color color-picker to change their color.

#32

The arrow downward and arrow upward icons don’t seem to be in the materialIcons.rplib library. I assume Google has added these since the library was created. Any chance of an update?

#33

Already done. Check this thread - Axure 8 Material Icons library updated to version 2.2

#34

If you’re looking for an alternative to using text icons, I recreated Google Material Design icons in Axure. They’re completely resizable and editable right within Axure. You can download the .rlib here:
http://axureloot.com/Axure-Material-Design.html

#35

I found in the end using an icon font is fine once you got it working.

What works for me is.
Open the “webfonts” page of the “generate html”
Select “Link to .css file” and paste this under URL.
//cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.csspanel.

Give it a Name “material Design icons”.

Install the font on your machine also. you can get the latest here https://materialdesignicons.com/

use the font wherever you want.
I made a Widget style that uses this font at 24 pixels (default size).

You can adjust the version number on the CDN as new versions come out. there is always a public css file.

Yes you need to be online for this to work.

unlisted #36
closed #37
listed #38
unlisted #39