# How to place switch icon after label (left aligned)

**URL:** <https://discourse.nodered.org/t/how-to-place-switch-icon-after-label-left-aligned/89810>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 July 2024 10:07 UTC](https://discourse.nodered.org/t/how-to-place-switch-icon-after-label-left-aligned/89810 "2024-07-27T10:07:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [27 July 2024 10:07 UTC](https://discourse.nodered.org/t/how-to-place-switch-icon-after-label-left-aligned/89810/1 "2024-07-27T10:07:54Z")

</div>

Hi,

When I place some switches with icons in a row, it is difficult to see, to which label the icon belongs.  
Looking at the following picture, it looks like the green open door belongs to door2.

![Screenshot-switch-icon](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b561c77f63645dad8074c3cd901f8dbe2187191d.jpeg)

How can I place the icon near to the label ?

thanks  
Thomas

---

<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:** [27 July 2024 10:36 UTC](https://discourse.nodered.org/t/how-to-place-switch-icon-after-label-left-aligned/89810/2 "2024-07-27T10:36:09Z")

</div>

```auto
.nrdb-switch {
    justify-content: flex-start;
    gap: 1rem; /*gap between label and icon*/
}
.nrdb-switch label {
    flex-grow:0;
}

```

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [27 July 2024 11:27 UTC](https://discourse.nodered.org/t/how-to-place-switch-icon-after-label-left-aligned/89810/3 "2024-07-27T11:27:00Z")

</div>

Hi,

thanks, got it working if I make

```auto
.my_switch_class_iconleft .nrdb-switch {
    justify-content: flex-start;
    gap: 1rem; /*gap between label and icon*/
}
.my_switch_class_iconleft .nrdb-switch label {
    flex-grow:0;
}

```

and assign this class to the class property of the switch 🤔

looks much better 🙂

![Screenshot-switch-icon-left](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0292018ca976ab7014f6ae74329565fa9fe39a88.jpeg)

---

<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:** [26 August 2024 11:27 UTC](https://discourse.nodered.org/t/how-to-place-switch-icon-after-label-left-aligned/89810/4 "2024-08-26T11:27:52Z")

</div>

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