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.
I have been struggling with defining this couple of the icon and text as a button.
I created a master from it, and wanted to reuse in multiple places, and then overriding the text and the icon. It could work greatly but I encounter 1 problem, causing me to break away more often than not.
You can type the name of the desired icon and then it appears. But sometimes it appears nicely aligned to the left, and other times it appears aligned to the right (shown in animated gif below). The text alignment is set to left, top.
Also, when I override the text of the button with somewhat larger text (anything other than “new” is larger 
) it appears on multiple lines in stead of one. How can I make it grow dynamically? Do I really have to count the number of letters?
Since icon fonts aren’t really text, they can be a bit finnicky when it comes, otherwise normal, font styling. Start with checking things like setting line height to “auto” and removing any padding.
Based on your example, it’s acting like there’s more text being entered than what the font recognizes as an icon. What happens if you change the font to a regular text one after getting the alignment issue?
