# Color changes but not icon in slider node?

**URL:** <https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966>\
**Category:** Dashboard\
**Created:** [28 October 2020 14:51 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966 "2020-10-28T14:51:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [28 October 2020 14:51 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966/1 "2020-10-28T14:51:56Z")

</div>

Check this out... Two flows. One drives color and icon via ui\_control. The other flow drives the icon and color as the documentation suggests can be done. But, the non-ui\_control method appears inconsistent... color changes but not icon? Am I doing something wrong the via non-ui\_control method?

```auto
[{"id":"d76a7e66.86411","type":"inject","z":"9c329f76.c5be1","name":"On","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":550,"y":1020,"wires":[["e044be7c.ec032"]]},{"id":"c47711da.cc1fa","type":"inject","z":"9c329f76.c5be1","name":"Off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":550,"y":1060,"wires":[["e044be7c.ec032"]]},{"id":"e044be7c.ec032","type":"function","z":"9c329f76.c5be1","name":"Icon","func":"msg.ui_control = {onicon:\"fa-circle\",oncolor:\"green\",officon:\"fa-circle-thin\",offcolor:\"red\"}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":690,"y":1040,"wires":[["1c9ce86.dcd9e18"]]},{"id":"1c9ce86.dcd9e18","type":"ui_switch","z":"9c329f76.c5be1","name":"","label":"Test","tooltip":"","group":"110f893b.a0f1d7","order":2,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa fa-circle","oncolor":"white","offvalue":"false","offvalueType":"bool","officon":"fa fa-circle-thin","offcolor":"white","x":830,"y":1040,"wires":[[]]},{"id":"131f697b.9f5b57","type":"inject","z":"9c329f76.c5be1","name":"On","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":550,"y":1120,"wires":[["411b4aa9.976244"]]},{"id":"d3ed9ee6.232e1","type":"inject","z":"9c329f76.c5be1","name":"Off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":550,"y":1160,"wires":[["411b4aa9.976244"]]},{"id":"411b4aa9.976244","type":"ui_switch","z":"9c329f76.c5be1","name":"","label":"Test","tooltip":"","group":"110f893b.a0f1d7","order":2,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa fa-circle","oncolor":"green","offvalue":"false","offvalueType":"bool","officon":"fa fa-circle-thin","offcolor":"red","x":690,"y":1140,"wires":[[]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [28 October 2020 15:03 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966/2 "2020-10-28T15:03:56Z")

</div>

Correct will be  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf663fdec767b5bedc3abbfe717175e7168811f2.png)

You have fa fa-something. That will break logic to choose base of icon classes.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [28 October 2020 15:38 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966/3 "2020-10-28T15:38:06Z")

</div>

But fwa site shows that syntax, and other places in NR flows that syntax is required. For example in development of a custom node, setting the icon for node you need "fa \*" qualification. Weird but ok.

---

<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:** [28 October 2020 15:40 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966/4 "2020-10-28T15:40:16Z")

</div>

It is different for use cases and it is confusing a bit. Best way still is to look at widget help page. This shows correct syntax for that widget.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [28 October 2020 16:27 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966/5 "2020-10-28T16:27:20Z")

</div>

Yeah, true. And, I kind of tripped my self up as well... actually developing a few custom nodes, before creating customized UI items in NR dashboard.

---

<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 November 2020 16:27 UTC](https://discourse.nodered.org/t/color-changes-but-not-icon-in-slider-node/34966/6 "2020-11-27T16:27:43Z")

</div>

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