# Dashboard 1 - icons in buttons and text nodes

**URL:** <https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796>\
**Category:** Dashboard\
**Created:** [26 July 2024 15:44 UTC](https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796 "2024-07-26T15:44:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpadie](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jpadie/32/87036_2.png) [@jpadie](https://discourse.nodered.org/u/jpadie)\
**Post date:** [26 July 2024 15:44 UTC](https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796/1 "2024-07-26T15:44:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 July 2024 16:41 UTC](https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796/2 "2024-07-26T16:41:24Z")

</div>

This thread may be interesting to read then ..

> [@Q: Tiles type panels](https://discourse.nodered.org/t/q-tiles-type-panels/35245):
>
> I have a play with the Dashboard and it fine for a basic design i have ended up with but i'd like to get a little bit more elegant. Used the Switch node to do this. [Screenshot 2020-11-02 213735] but i'd like to try make it look like this if its possible.. Not to fussed about the - + bit.. just more doing the tile effect. probably lots of clever CCS no doubt. [Screenshot 2020-11-02 214023] Any pointers if its even possible. ta I've tried doing it as a Button in separate groups .. but i…

---

<div class="post-metadata">

**Author:** ![jpadie](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jpadie/32/87036_2.png) [@jpadie](https://discourse.nodered.org/u/jpadie)\
**Post date:** [26 July 2024 19:17 UTC](https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796/3 "2024-07-26T19:17:48Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![jpadie](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jpadie/32/87036_2.png) [@jpadie](https://discourse.nodered.org/u/jpadie)\
**Post date:** [28 July 2024 15:13 UTC](https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796/4 "2024-07-28T15:13:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 August 2024 15:14 UTC](https://discourse.nodered.org/t/dashboard-1-icons-in-buttons-and-text-nodes/89796/5 "2024-08-27T15:14:24Z")

</div>

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