# Suggestion for which icons to use

**URL:** <https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964>\
**Category:** Dashboard\
**Created:** [8 February 2022 01:43 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964 "2022-02-08T01:43:08Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 00:20 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/21 "2022-02-09T00:20:43Z")

</div>

Hang on.... Is this the node that sends the message?

Because I think we are talking about opposite ends of the message flow.  
Dunno. Just checking.

I can (usually) work out how to send the message. But dealing with the reception is a whole other thing.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 00:22 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/22 "2022-02-09T00:22:47Z")

</div>

This is just a normal ui switch.  
When you click it sends its msg and then its icon changes between on and off icons you have set.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 00:22 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/23 "2022-02-09T00:22:56Z")

</div>

![Screenshot from 2022-02-09 11-21-51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8be2d43c3a781e56d97cb25178530f6935d7a35e.png)

That isn't `iconify-mdi:fan-auto` and `iconify-mdi:fan`

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 00:25 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/24 "2022-02-09T00:25:04Z")

</div>

I'm not using those ones, they are the ones Steve posted, these are some others you see in my screenshot.

The template code gives access to all iconify icons so you can use whaterver you want to.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 00:28 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/25 "2022-02-09T00:28:15Z")

</div>

Ok, my bad.

But I am still _missing_ something.

This is the switch node - as per example.  
And the `template` node.

```auto
[{"id":"6979f5841ed2ce16","type":"ui_template","z":"10dda891.0445cf","group":"9d94622b.1f02e","name":"","order":6,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":870,"y":1000,"wires":[[]]},{"id":"51cbd130e48f277f","type":"ui_switch","z":"10dda891.0445cf","name":"","label":"switch","tooltip":"","group":"32e5d991.ba0e26","order":6,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"iconify-mdi:fan-auto","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"iconify-mdi:fan","offcolor":"","x":1180,"y":1080,"wires":[[]]},{"id":"9d94622b.1f02e","type":"ui_group","name":"Local Telemetry","tab":"4b7ee1607e13459c","order":1,"disp":true,"width":"7","collapse":false},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"4b7ee1607e13459c","type":"ui_tab","name":"Telemetry","icon":"track_changes","order":1,"disabled":false,"hidden":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

```

This is what I see on the dashboard.

![Screenshot from 2022-02-09 11-27-08](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab23325c8cbafc9e6c2e74c49927b937520eb1a1.png)

![Screenshot from 2022-02-09 11-27-11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/d/0d08347202da9289dec286c18eb6d1903a7107ae.png)

So, something isn't doing what it should.

Weirdly, if I do it in a `button` node, it works.

```auto
[{"id":"c092178334c6fcd3","type":"ui_button","z":"10dda891.0445cf","name":"","group":"32e5d991.ba0e26","order":7,"width":"2","height":"1","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"iconify-mdi:fan-auto ","payload":"","payloadType":"str","topic":"","x":1330,"y":1080,"wires":[[]]},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

```

![Screenshot from 2022-02-09 11-31-09](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/405ab1bc08621f26de2268049a3864dfd8895ef3.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 00:38 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/26 "2022-02-09T00:38:03Z")

</div>

seems you need to set a color for off and on then it will work, you can also change its size by putting it after the icon name eg **iconify-mdi:fan 34px**

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 00:40 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/27 "2022-02-09T00:40:32Z")

</div>

Ok, so now, are we using the `switch` node to SEND of DISPLAY the icon?

I'd prefer to DISPLAY it. Sending is done via `change` nodes from the flow.  
I get that part.

And having to set the colour/s.... I want to control that by the incoming message.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 00:49 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/28 "2022-02-09T00:49:05Z")

</div>

The color and icon can be setup how you like, operating the switch can then do whatever is needed to make your fan work, while also displatying its current setting ?

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 00:54 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/29 "2022-02-09T00:54:53Z")

</div>

I have the _input_ side worked out with _buttons_ to press.

It is a set of .... 4 buttons.  
`AUTO`  
`MANUAL`  
`ON` and `OFF`

Then there is an icon which depicts if the fan is running or not.  
But no indication of the _mode_. (Auto/Manual)  
So I'm wanting something to show that side of things.

This is where I am at.  
Seems the colour thing isn't quite working as I thought.  
Ok, it caught me the first time, but when you said the colours need to be defined, I tried it this way.

Keeping it as simple as I can.

```auto
[{"id":"d66f4d53ce4f3080","type":"ui_switch","z":"10dda891.0445cf","name":"","label":"switch","tooltip":"","group":"32e5d991.ba0e26","order":7,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"iconify-mdi:fan 34px","oncolor":"{{msg.colour}}","offvalue":"off","offvalueType":"str","officon":"iconify-mdi:fan-auto 34px","offcolor":"{{msg.colour}}","x":1480,"y":1030,"wires":[[]]},{"id":"d882965753d95591","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":1340,"y":990,"wires":[["d66f4d53ce4f3080"]]},{"id":"3197d67953d6f103","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":1340,"y":1030,"wires":[["d66f4d53ce4f3080"]]},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 01:13 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/30 "2022-02-09T01:13:09Z")

</div>

if you see my example

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/8319185091db588049eac21b8912238f90278b13.png)

I have 2 switches next to the fan. First is power on or off (running) which I can control manually.  
Second changes mode from manual to auto,. Both also show the current state.

If the fan is started automatically then the first icon would turn green, just as if I had pressed it myself,so there is no need for 4 buttons.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 01:21 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/31 "2022-02-09T01:21:19Z")

</div>

Yeah, thanks.

But sorry, I am not getting why it isn't working with the two `inject` nodes.

I'm trying to not get too far ahead of things. Something that just came to mind is the new `multiposition switch` (slider) that may be better for doing what I want.

But that's a different thing.

I'm trying to get the icon to represent what is going on.  
I don't mind trying things to see different approaches to things. But just now I am really not with it.  
You've shown me how to use the `switch` node to toggle the icons depending on the message received.  
Fair enough. But to get it working, I need to define the colours - or it is just blank.  
Taking that to the next step, I would like to control the colours of the icons in the message.  
But that doesn't seem to work.  
If it can't be done, fair enough. Can I use another node that allows it?

I've got the size worked out too. Not too difficult. Just add `34px` (for instance and as it is a good size) to the end of the icon name and _voila_ it works.

I'm going to ask how to get them to spin, but that too eludes me. But again: I don't want to get too far ahead of where we are.

At this point, I can set the icons and their sizes. Different messages show different icons. (With the `switch` node)  
But colour: nothing.

I would like to be able to control:  
The icon shown.  
The size - done.  
The colour - can't get it working.  
Spinning. (Haven't got that far yet)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 01:31 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/32 "2022-02-09T01:31:13Z")

</div>

I don't think switch supports color by msg, but you can have a different color for off and on state in the config.  
As you only need two switches and they can only have two states each why would you need more colors ?

For spin use **iconify-mdi:fan 34px fa-spin** in icon field.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 01:35 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/33 "2022-02-09T01:35:50Z")

</div>

Well, for reasons unknown, it isn't spinning.

![Screenshot from 2022-02-09 12-33-41](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cab17fab851ff52aa45867ffa5be0998e6dce6d1.png)

![Screenshot from 2022-02-09 12-33-00](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a90c2839adbdd3b0a05b4acf56050d07475d27fd.png)

Even after I send the `on` command to the node.

I was only wanting to set the colours by message.... It is possible to set them as how you showed. Ok.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 01:37 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/34 "2022-02-09T01:37:23Z")

</div>

> [@Sean-McG](#):
>
> For spin use **iconify-mdi:fan 34px fa-spin** in icon field.

fa-spin as above

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 01:39 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/35 "2022-02-09T01:39:25Z")

</div>

```auto
[{"id":"d66f4d53ce4f3080","type":"ui_switch","z":"10dda891.0445cf","name":"","label":"switch","tooltip":"","group":"32e5d991.ba0e26","order":7,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"iconify-mdi:fan 34px mdi-spin","oncolor":"red","offvalue":"off","offvalueType":"str","officon":"iconify-mdi:fan-auto 34px","offcolor":"lime","x":1480,"y":1030,"wires":[[]]},{"id":"3197d67953d6f103","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":1340,"y":1030,"wires":[["d66f4d53ce4f3080"]]},{"id":"d882965753d95591","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":1340,"y":990,"wires":[["d66f4d53ce4f3080"]]},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

```

Not here. 😕

The colours change. But no spinning.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 01:41 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/36 "2022-02-09T01:41:01Z")

</div>

> [@Sean-McG](#):
>
> > [@Sean-McG](#):
> >
> > For spin use **iconify-mdi:fan 34px fa-spin** in icon field.
> 
> fa-spin as above

Its still fa-spin not mdi-spin

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 01:43 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/37 "2022-02-09T01:43:43Z")

</div>

Sorry.... I scrolled down to the bottom of the page with all the icons...

They say: mdi-spin.

![Screenshot from 2022-02-09 12-42-07](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/426651a8072825ec7ba7639b6ca6b938882ed7c6.png)

fa-spin... that's Font Awesome - I thought we were talking Material Design?  
(More confused)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 01:45 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/38 "2022-02-09T01:45:06Z")

</div>

fa-spin adds the needed class to the icon, it doesn't matter which icon it is.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [9 February 2022 01:46 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/39 "2022-02-09T01:46:06Z")

</div>

(Silly me)

Thanks. We're getting there.

Which is good.  
And thanks - sincerely - for the time/effort.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 February 2022 01:48 UTC](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/40 "2022-02-09T01:48:02Z")

</div>

So now you have a nice gui, its not too hard to write the flow around it to control your fan.  
Bed time for me 😴 😴 😴

[Previous page](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964.md?page=1)

[Next page](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964.md?page=3)