Google Material Icons Widget Library for RP 8 (Icon Fonts)


#1

Hi guys,

We created a Google Material Icons widget library so there’s a library supporting the most recent release, which is currently version 3.0.1.

Please note that different versions of Google MI’s CSS and font file could be floating around, which may be incompatible with the V3.0.1 widget library attached below. Using consistent versions across these three components (RPLIB, MI font file, and CSS link) would be ideal. You can find the most recent version of Google Material Icons (V3.0.1) below.

Feel free to shoot us an email at support@axure.com if you have questions about any of these steps.


Hi Axurians - Here are the step-by-step directions on how to utilize Google Material Icons in your Axure prototype.

1. Download and install the Google Material Icons font file.

https://github.com/google/material-design-icons/releases/download/3.0.1/material-design-icons-3.0.1.zip

Open the “iconfont” folder and install the “MaterialIcons-Regular.ttf” font file.

2. Restart Axure RP.

If Axure RP is open, shut it down completely and re-open it. This will allow you to choose the “Material Icons” font from the font droplist and see the correct icon in the editor.

3. Go to “Publish > Generate HTML Files” and add the Material Icons CSS link in the “Web Fonts” tab:

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

4. Download the Axure Google Material Icons V3.0.1. widget library (attached below) and load it into Axure RP via hamburger menu > “Load Library”.

Alternatively, you can manually type out the icons from the Material Icons list (just make sure the selected font is Material Icons). If the targeted icon is “mood”, for example, type out “mood” and the icon should appear. If the targeted icon is “mood bad”, type out “mood_bad” (the [Space] character needs to be converted to an underscore “_”) and the icon should appear. Here’s a video to demonstrate this using the “sentiment neutral” icon:

5. Drag and drop Google Material Icons from this library.

Adjust style of all icons using the “MaterialIcons” custom style or format individual icons.

Note: Material Icons are adjusted using font size and font color.
GoogleMI V3.0.1.rplib (6.74 MB)


Reducing width of cross icon
No Material Icons showing after upgrade
#2

I feel stupid, but I can’t find the download link to the Widget Library. I can’t find download on any other forum post with attached file either. You recently updated the forum, but I don’t think all the attached filed disappeared in the process?


#3

Same problem! Can’t find attached files :confused:


#4

Hi dagtj and dunny,

Thanks for reporting this. Some file attachments were indeed lost in the recent forum migration, and we’re currently looking into the issue.

Please let us know if you have any questions or if there’s anything else we can assist you with in the meantime. We appreciate your patience!


#5

Just an update: we’ve been able to restore many of the affected file attachments, so you should now be able to download the .rplib file in Jane’s original post. Please let us know if you happen to run into any other issues or missing attachments!


#6

Hi @Jane_Axure, I just downloaded the library.
Thanks, I know it’s a massive work to map one by one all icons but you made a great job and for me, which I do Material Design every day it’s a huge time saver!

:relaxed:


#7

Hello. Thanks for sharing this! I’m having a bit of an issue. The icons are not rendering in Chrome (but are in Firefox). Is this unusual?


#8

For anyone following up,

Ynotster wrote into the help desk about this, and we’re waiting on a few more pieces of information since we weren’t able to reproduce the same behavior on our end. If anyone runs into a similar issue, please double-check that everything is up-to-date (e.g. Axure RP, the browser) and that the Google Materials icon font has been locally installed on the computer. Thanks!


#9

Hi, in the original post, step 1, do we just need to download the Google Material Icons font file, and after uncompressing it, install just the “iconfont” folder? rather than installing the entire font file?

Also, Material Icons is showing up as just “M I” in the font dropdown when I look for it, but if I have a material icons item selected, the full name appears. Is that just something I’m seeing?


#10

I can see the icons in the library but when i drop them onto the design area, I only see the name of the icon, not the icon itself. Any solution to this?

I also have this problem where I only see “M I” within my fonts dropdown. Dont know if this is a problem though.


#11

Im using a macbook pro and the latest version of Axure.


#12

Hi jes777 and trck,

The “iconfont” folder contains the MaterialIcons-Regular.tff" font file (the one Jane mentioned in her original post); this is the file you’ll want to use to install the font locally on your computer. With that said, I’m also seeing that the installed Material Icons font is showing up as “M I” in RP’s font dropdown menu, so I’ll go ahead and let our QA team know about this.

As for the other issue you’re seeing @trck, would something other than “Applied Font” happen to be selected in the “Font” setting of your project’s default page style? You can find this option under the “Sketch Effects” section of the Page Style Manager (“Project > Page Style Editor”).

This setting might be overriding the original Material Icons font of the icons if it’s set to something else, but changing it back to “Applied Font” should allow the icons to display properly. Let me know if this helps!


#13

So it did. I was using some other font than “Applied font”. This solved the issue.

Thank you for the quick answer. Appreciate it.

Cheers!

Jure


#14

Hi,
Sorry about the very tardy response! Thanks for confirming the file to install and for reporting the M I issue to QA - it’s fixed!

One more related question: when I manually type out the icon name, there’s a lot of empty (padding? margin?) space around the icon no matter what font size or alignment I try. The Style panel shows 0px padding has been applied. How can I get rid of the extra blank space?


#15

Hi jes777,

It doesn’t look like there’s a way to remove the extra spacing around the rendered icon font on a shape. If there’s a particular icon that you need to remove the padding from, one idea is to import the raw SVG that’s provided in the MI zip archive. (Each category has an “svg” folder with the contained assets.) Once you drag an SVG onto the RP canvas, you can convert it to custom shapes by right-clicking it and selecting “Convert to Custom Shape”. Here’s a blog post with a GIF animation:

>https://www.axure.com/blog/can-now-edit-imported-svgs-axure-rp/

And after converting, you could remove the padded square that wraps around.


#16

From what I can see, there are still several issues with this widget library and it’s font.

  • changing the size on an icon’s box or it’s padding completely detroys layout. Depending on values, it can hide the icon, or push it off-center
  • if you create a new widget style with the Material Font, you rapidly have conflicts (icon no-longer showing, replaced by an empty-character box
  • the font itself shows up with a strange name ("M I ", as mentionned in comments above)

I’m using RP 8.1.0.3375 on Windows 8.1.


#17

Hi @Alex_Axure, I’m facing a similar problem @jes777 however, I just have applied font selected. for some reason the font isn’t rendering when I open it in the browser, but it does work in Axure RP itself. See attached images:


#18

Side note: I played around a little bit with the font sizes, and making it significantly smaller fixed the issue, as the font now fit within the object that I wanted, but it doesn’t solve my issue as I need it to fit approrpriately within the object’s size.


#19

Hi lcardona,

When you adjust the font size of your icons, are you seeing that the icons themselves are being resized as well? Would your icons resize handles happen to be manually adjusted or set to auto-fit? You can turn on auto-fit by double-clicking the handles so that they turn yellow. This will make it so that the icon’s selection container will automatically adjust according to the icon’s font size, so it may help to have it turned on:

If that didn’t help, would you be able to post the RP file (and RPLIB file if applicable) you’re currently working with so we could get a closer look? You can also send it over to support@axure.com if you’re more comfortable with that. We’ll be standing by!


#20

Hi Axurists - a query on this - is it comprehensive?

I want to use ‘check_circle_outline’ - it’s referenced on Google Material Icons page - but I’m not sure that it’s in the Axure library (or the downloaded font either to be fair). Can I/you check?

Thanks!

MG