# Icon Style at Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895>\
**Category:** Dashboard\
**Created:** [8 December 2025 17:58 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895 "2025-12-08T17:58:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [8 December 2025 17:58 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/1 "2025-12-08T17:58:07Z")

</div>

Hello,  
i am still confused how i can bring a icon into my dashboard in dependence of an input.  
Example: payload :1 = icon alert, payload 2. = icon standby.  
All i find are out of dashborad 1.0 or with switch or button nodes in 2.0.  
I just want to show the state(value) - even when i use the switch node i don't know how to connect the icon.  
Thx in advance  
Olmuk

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [11 December 2025 09:59 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/2 "2025-12-11T09:59:38Z")

</div>

This will show an mdi icon from msg.payload using a ui-template

```auto
[{"id":"0347b8f77f1942f3","type":"ui-template","z":"997da33a0beedade","group":"4f87bd59a15b847e","page":"","ui":"","name":"icontest","order":0,"width":0,"height":0,"head":"","format":"<template>\n<div>Icon from msg.payload: \n <span :class=\"`mdi ${msg?.payload}`\" style=\"font-size:64px; color:green;\"></span></div>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":7500,"wires":[[]]},{"id":"b2849a461e3659fc","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"mdi-weather-sunny","payloadType":"str","x":330,"y":7500,"wires":[["0347b8f77f1942f3"]]},{"id":"7ce447526163b30d","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"mdi-home","payloadType":"str","x":300,"y":7560,"wires":[["0347b8f77f1942f3"]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"c4cba76c368d7996","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c4cba76c368d7996","type":"ui-theme","name":"Test theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"c3db8356e5f7c689","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

```

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [11 December 2025 20:02 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/3 "2025-12-11T20:02:50Z")

</div>

Hello Colin,

many thanks for the answer - it works fine.

How can i use awesome fonts ?  
fa-5x fa-gear fa-spin, color green and  
fa-5x fa-gear, color orange

I don't know abaout the mdi-weather-sunny

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [11 December 2025 20:29 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/4 "2025-12-11T20:29:03Z")

</div>

Hello Colin,  
i draw a blank, sorry Material design icon

but the think there are more with the fa - how is the syntax, please ?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [11 December 2025 20:35 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/5 "2025-12-11T20:35:15Z")

</div>

> [@Olmuk](#):
>
> How can i use awesome fonts ?

I don't know whether it is possible. The mdi fonts are built in. The icons are those in v7.4.47 of the mdi fonts. See [Material Design Icons - Icon Library - Pictogrammers](https://pictogrammers.com/library/mdi/). There are a vast number available.

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [11 December 2025 20:56 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/6 "2025-12-11T20:56:12Z")

</div>

I found the necessary in mdi, thanks.  
And i connect to the incoming value for change the icon - great !!!

And i'v learned a lot ...

---

<div class="post-metadata">

**Author:** ![Olmuk](https://avatars.discourse-cdn.com/v4/letter/o/65b543/32.png) [@Olmuk](https://discourse.nodered.org/u/Olmuk)\
**Post date:** [12 December 2025 22:09 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/7 "2025-12-12T22:09:40Z")

</div>

Hi Colin, do you have an idea how i can change the background color of the whole text node with the msg.payload ?

I can set the label, size, color and background color of the icon :

```auto
<template>
<div><h1>Status Program</ h1>
    <span :class="`mdi ${msg?.payload}`" style="font-size:100px; color:black; background-color:powderblue;"></span></div>
</template>

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [13 December 2025 09:37 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/8 "2025-12-13T09:37:34Z")

</div>

> [@Olmuk](#):
>
> how i can change the background color of the whole text node with the msg.payload

I isn't a text node it is a template node.  
Do you mean that you want to change the background colour of the whole div? That is just basic html/css.

---

<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:** [12 January 2026 09:38 UTC](https://discourse.nodered.org/t/icon-style-at-dashboard-2-0/99895/9 "2026-01-12T09:38:10Z")

</div>

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