# Slider with custom icon?

**URL:** <https://discourse.nodered.org/t/slider-with-custom-icon/63225>\
**Category:** Dashboard\
**Created:** [29 May 2022 22:00 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225 "2022-05-29T22:00:17Z")\
**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:** [29 May 2022 22:00 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225/1 "2022-05-29T22:00:17Z")

</div>

Slider with custom icon?

I enabled custom configuration on slider and used an icon that I know is in the FA icon library, done similar for say dashboard buttons. but the slide is not using the icons for on and off?

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2022 23:34 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225/2 "2022-05-29T23:34:57Z")

</div>

What if you simply put `fa-circle`?

Built in help...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5ef061ac4534e26d323fa17892232982cdb14517.png)

---

<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:** [30 May 2022 02:52 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225/3 "2022-05-30T02:52:54Z")

</div>

I believe I tried that, but will again. Like I said, have done this with other nodes, just not a switch node. Based on what you presented it should work.

---

<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:** [30 May 2022 05:37 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225/4 "2022-05-30T05:37:23Z")

</div>

If you define icons, then the color must be defined.

---

<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:** [30 May 2022 14:00 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225/5 "2022-05-30T14:00:45Z")

</div>

That is not required for a simple button. So a switch has that specific requirement? Tested it... yup color required... WHY is that the case? Makes on sense when other UI objects can have an icon with no color assignment explicitly required. I mean easy to get around but seems like a design inconsistency?

```auto
[{"id":"b1227818064dcd74","type":"tab","label":"Test","disabled":false,"info":"","env":[]},{"id":"e49709133353d97c","type":"inject","z":"b1227818064dcd74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":60,"wires":[["983ebad0d43f0d30"]]},{"id":"983ebad0d43f0d30","type":"ui_button","z":"b1227818064dcd74","name":"","group":"d7347da6c81c08f4","order":23,"width":0,"height":0,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","className":"","icon":"fa-refresh","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":280,"y":60,"wires":[[]]},{"id":"1e80cf27aa311ccf","type":"inject","z":"b1227818064dcd74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":120,"wires":[["5b51fcedb67256ba"]]},{"id":"5b51fcedb67256ba","type":"ui_switch","z":"b1227818064dcd74","name":"","label":"switch","tooltip":"","group":"d7347da6c81c08f4","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-power-off","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"fa-circle-o-notch","offcolor":"","animate":false,"className":"","x":270,"y":120,"wires":[[]]},{"id":"4ad96db8dd7532de","type":"inject","z":"b1227818064dcd74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":180,"wires":[["9f388e17bb5d9c63"]]},{"id":"9f388e17bb5d9c63","type":"ui_switch","z":"b1227818064dcd74","name":"","label":"switch with color","tooltip":"","group":"d7347da6c81c08f4","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-power-off","oncolor":"white","offvalue":"false","offvalueType":"bool","officon":"fa-circle-o-notch","offcolor":"red","animate":false,"className":"","x":300,"y":180,"wires":[[]]},{"id":"d7347da6c81c08f4","type":"ui_group","name":"Test","tab":"207b62cbfdb3f6ba","order":2,"disp":true,"width":"6","collapse":true,"className":""},{"id":"207b62cbfdb3f6ba","type":"ui_tab","name":"Test","icon":"dashboard","order":10,"disabled":false,"hidden":false}]

```

Example flow, button can have icon with no color explicitly set.

---

<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:** [29 June 2022 14:01 UTC](https://discourse.nodered.org/t/slider-with-custom-icon/63225/6 "2022-06-29T14:01:16Z")

</div>

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