Google MI icons do not show when resizing

technical-troubleshooting
#1

I added GoogleMI library v3.0.1 to Axure 8. I can add the icons, but then I scale the box around it, the icon disappears.
I am not trying to scale the icon itself (that I can do with the font size), but the outside box so I can use it directly as a button.
Why is this happening and how can I stop it from happening?

#2

Hi TedKoch!

Just to confirm, are the Google Material icons disappearing when the icon’s bounding rectangle’s auto-fit is disabled? This could be caused by scaling down the size of the box. There is a issue that we have on file regarding the 3.0.1 version of the Google Material Icons font where disabling auto-fit for a widget can make it so that the font icon does not render in Axure RP 8. Could you please let me know if setting the rectangle where the icon is placed to auto-fit allows the font icon to render correctly? You can set the rectangle to auto-fit to the contents of the rectangle by double-clicking one of the rectangle’s corner handles.

Additionally, if the space used for this rectangle does not match the dimensions you would like to use for your button, you could place a hotspot over the icon, so that the correct button dimensions are clickable. I hope this helps some!

#3

Hello Chelsea,

I can’t find the setting of auto-fit. I read in other posts it should be under the right mouse click, but it is not there when I click the MD icon.

Your hotspot suggestion does not do the trick as the mouse-over actions than cover the icon. Putting the hotspot behind the icon looks strange (that is the idea I had) because the mouse-over action of the hotspot is gone when the mouse is on the icon. Than I thought let me group the hotspot an icon and than apply the mouse-over effect, but RP8 applies that as the same effect onto two separate widgets (effectively the same as applying it manually to the two ungrouped widgets).

Than I was out of ideas and asked for help here.

#4

Hi TedKoch,

You can access the auto-fit setting by clicking on the corner handle of the widget containing your icon text:

If the size of the auto-fit widget with text does not meet your desired size and you need to implement mouse-over effects for your icon, you may want to download an SVG file of your desired icon instead of using text. SVGs can be converted to custom shape widgets in Axure RP, which can then use mouse-over effects the same way a shape widget in Axure RP can. You can learn more about converting SVG files into custom shape widgets here.

#5

Hello Chelsea,

The auto-fit is what I don’t want, because I want a bigger size. I will make it into an SVG handle it in that manner, but that is not how it should work. Can we assume that disappearing icons when sizing the box around Google MI widgets is a bug in Axure RP8?

Best,
Ted

#6

Hi Ted!

That’s correct, we have this issue on file and our teams are currently investigating the cause of this behavior. I’ve also added a note to the bug report regarding your experience.

closed #7