# Display label above/below icon

**URL:** <https://discourse.nodered.org/t/display-label-above-below-icon/2049>\
**Category:** Dashboard\
**Created:** [4 August 2018 12:07 UTC](https://discourse.nodered.org/t/display-label-above-below-icon/2049 "2018-08-04T12:07:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![K-RAD](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k-rad/32/38966_2.png) [@K-RAD](https://discourse.nodered.org/u/K-RAD)\
**Post date:** [4 August 2018 12:07 UTC](https://discourse.nodered.org/t/display-label-above-below-icon/2049/1 "2018-08-04T12:07:41Z")

</div>

Probably a newbie question, but how could I display the label above or below the icon for a button/switch?

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [4 August 2018 12:21 UTC](https://discourse.nodered.org/t/display-label-above-below-icon/2049/2 "2018-08-04T12:21:02Z")

</div>

Quick question, quick answer..... with standard dashboard switches not, unless you make a trick using a text box + switch or a template.

Regards

---

<div class="post-metadata">

**Author:** ![K-RAD](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/k-rad/32/38966_2.png) [@K-RAD](https://discourse.nodered.org/u/K-RAD)\
**Post date:** [4 August 2018 12:29 UTC](https://discourse.nodered.org/t/display-label-above-below-icon/2049/3 "2018-08-04T12:29:50Z")

</div>

This is what I have right now, a switch and a slider to control a hue bulb.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/185d271de1af586e7595190a4839a2288dae82d6.png)

I would like for the label to show above the icon. I'm guessing the best way to do that is with template (would be cool to combine both switch and slider into one button, is that even possible?).

Could someone give me an example? (I've just started using node-red yesterday)

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [4 August 2018 12:39 UTC](https://discourse.nodered.org/t/display-label-above-below-icon/2049/4 "2018-08-04T12:39:38Z")

</div>

I did it in same line but I guess you could do the same adding on first line of the dashboard the switches and on the line below text box with the names.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/68589f8a2ac942c6680bc67704895813080860eb.png)

In my case I use one switch per line made by Icon(bulb) + standard switch + ICON (led)

Regards

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [4 August 2018 13:50 UTC](https://discourse.nodered.org/t/display-label-above-below-icon/2049/5 "2018-08-04T13:50:50Z")

</div>

DIsregard my previous post if you read it before. Edited to correct.

![r-001](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f60c93597d2ba12a5b75356202bc33062a1e4561.PNG)

Code:

```auto
[{"id":"4ea8f239.42877c","type":"tab","label":"Switch and icon together","disabled":false,"info":""},{"id":"cdb14e6e.07d9d","type":"change","z":"4ea8f239.42877c","name":"Description","rules":[{"t":"set","p":"topic","pt":"msg","to":"Alarm","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":220,"wires":[["f04373f3.eab1b"]]},{"id":"f04373f3.eab1b","type":"ui_text","z":"4ea8f239.42877c","group":"9e2bac96.b321b","order":2,"width":"2","height":"1","name":"Alarm","label":"","format":"<center><font color={{(msg.payload?\"red\":\"grey\")}}><i class=\"fa fa-lightbulb-o fa-2x\"></i></font><br><font size=\"-2\">{{msg.topic}}</font></center>","layout":"col-center","x":534.444507598877,"y":221.11111450195312,"wires":[]},{"id":"292aefee.0c69a","type":"ui_switch","z":"4ea8f239.42877c","name":"","label":"","group":"9e2bac96.b321b","order":0,"width":"0","height":"0","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":190,"y":220,"wires":[["cdb14e6e.07d9d"]]},{"id":"3ab819fe.c9af96","type":"change","z":"4ea8f239.42877c","name":"Description","rules":[{"t":"set","p":"topic","pt":"msg","to":"Alarm","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":320,"wires":[["b18b9744.59f678"]]},{"id":"b18b9744.59f678","type":"ui_text","z":"4ea8f239.42877c","group":"e0e6934.ab83e7","order":2,"width":"1","height":"1","name":"Alarm","label":"","format":"<font size=\"-2\">{{msg.topic}}</font><font color={{(msg.payload?\"red\":\"grey\")}}><i class=\"fa fa-lightbulb-o fa-2x\"></i>","layout":"row-left","x":534.444507598877,"y":321.1111145019531,"wires":[]},{"id":"f596f705.ac6a88","type":"ui_switch","z":"4ea8f239.42877c","name":"","label":"","group":"e0e6934.ab83e7","order":0,"width":"0","height":"0","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":190,"y":320,"wires":[["3ab819fe.c9af96"]]},{"id":"9e2bac96.b321b","type":"ui_group","z":"","name":"S1","tab":"62712bbf.888b94","disp":true,"width":"2","collapse":false},{"id":"e0e6934.ab83e7","type":"ui_group","z":"","name":"S2","tab":"62712bbf.888b94","disp":true,"width":"2","collapse":false},{"id":"62712bbf.888b94","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

```