Dashboard 1 - icons in buttons and text nodes

Dashboard
1

dear all
I am wanting to use material design icons from pictogrammers in buttons and text nodes. and to place those icons above the text (i.e. the button label or the contents of a text node).

with buttons I am getting mixed results - I can't reliably get the icon to position above the label, and with some icons (e.g. mi-ph) are not fully visible.

with text nodes I am getting nowhere. there doesn't seem to be a UI friendly way of adding an icon.

is there a common workaround for this use-case?

thanks
justin

2

This thread may be interesting to read then ..

3

Thank you

I am unable to reproduce the effect that you created, I suspect that there has been a breaking change in the dashboard code. It does give me a direction though.

Whilst testing this I have also uncovered a bug in the material design icon implementation on buttons (assigned icons revert to font-awesome on refresh).

4

I have now reproduced the effect with font-awesome icons. thank you for the pointer.

I am unable to do so with material design icons. they seem not to centre and not to scale reliably with font-size directives. in fact, with a 4x4 button, anything over 2rem as a font-size seems to make the parent (the div and the tags) become wider than the constraining box and to make the glyph disappear. I am experimenting with the speedometer and pH icons.

is there any best practice for using material design icons? I'm looking to use them at 10rem in a 4x4 size in a 12 width grid screen.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.