Icon library and combining icons and text?



What is the best way to use material design icons? I downloaded the library in https://www.axurethemes.com/axure-icon-packs/google-material-design-axure-icon-library but it is not as handy as the fontawesome library.

is it possible to combine an icon and text on a button or in some label? Until now I am always creating an icon and a button and then grouping those. But then I am sometimes struggling with alignment.


You can download and install the Material Icon web font (https://google.github.io/material-design-icons/#icon-font-for-the-web) and then add a font mapping to your publish configuration (https://fonts.googleapis.com/icon?family=Material+Icons). After that you can just type in the name of the icon and set the font to “Material Icons”. This method is particularly handy for using icons in repeaters because you can use the “set to rich text” option to change images and colors without resorting to dynamic panels for each, different image.

As far as combining icons and text, I haven’t really found any better solution than you have. The most consistent method I’ve been able to come up with is to treat the button widget as two pieces. Basically, I make two “buttons”, one with the icon in it and one with the text, and then group them together. Looks something like this:
Using the widget’s padding style makes adjusting things a lot easier.


Thank you very much!
A good idea for those padding styles!