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 firstname.lastname@example.org 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.
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:
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)