# Size of custom MDI switch icon

**URL:** <https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [26 September 2024 11:44 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280 "2024-09-26T11:44:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [26 September 2024 11:44 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/1 "2024-09-26T11:44:44Z")

</div>

1. How can I set the size of a custom switch icon. (mdi ToggleSwitch)  
standard ToggleSwitch is far too small

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/9238029f8fb9430c267bbbae2bec4e3b1e46f795.png)

1. How can I center the switch horizontaly in a 3x1 field?

---

<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:** [26 September 2024 16:21 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/2 "2024-09-26T16:21:48Z")

</div>

Nobody can answer to that question. The appearance of html element depends on where in DOM it is situated and which kind of CSS rules apply to that DOM tree, including the element itself.

You have to share much more about the situation, specially as you declare something is custom.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [27 September 2024 13:22 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/3 "2024-09-27T13:22:01Z")

</div>

just upfront - I have very little CSS experience

please have a look at this small flow and compare it to the standard switch. The size of the standard switch is much bigger.

```auto
[{"id":"8aa8d67f70d622dc","type":"inject","z":"e4970c151a447d08","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":410,"y":340,"wires":[["58b0e6ab298b652e"]]},{"id":"58b0e6ab298b652e","type":"ui-switch","z":"e4970c151a447d08","name":"","label":"switch","group":"e9890bb51c43493d","order":1,"width":0,"height":0,"passthru":true,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","clickableArea":"switch","onvalue":"on","onvalueType":"str","onicon":"toggle-switch ","oncolor":"red","offvalue":"off","offvalueType":"str","officon":"toggle-switch-off {3}","offcolor":"yellow","x":630,"y":380,"wires":[["bf5bd18fc4036569"]]},{"id":"bf5bd18fc4036569","type":"debug","z":"e4970c151a447d08","name":"debug 2516","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":850,"y":380,"wires":[]},{"id":"595aa03e029b0efb","type":"inject","z":"e4970c151a447d08","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":410,"y":420,"wires":[["58b0e6ab298b652e"]]},{"id":"e9890bb51c43493d","type":"ui-group","name":"test","page":"317be3cd393d7d7b","width":"12","height":"3","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"317be3cd393d7d7b","type":"ui-page","name":"EGAZ","ui":"4214a7de17fb1f22","path":"/page7","icon":"home","layout":"flex","theme":"a33c0aa6ec50799a","order":7,"className":"","visible":"true","disabled":"false"},{"id":"4214a7de17fb1f22","type":"ui-base","name":"Home Hannes","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"fixed","titleBarStyle":"default"},{"id":"a33c0aa6ec50799a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#2f2d2d","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

please check this link: [mdi icons](https://pictogrammers.com/docs/library/mdi/getting-started/react/)

---

<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 September 2024 15:07 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/4 "2024-09-27T15:07:17Z")

</div>

Couple of links for you.

> [@Icon size using native switch -dashboard 2](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/6):
>
> With CSS override like this [image]

> <https://github.com/FlowFuse/node-red-dashboard/issues/965>
>
> A\[forum post\](https://discourse.nodered.org/t/icon-size-using-native-switch-das…hboard-2-0/88611) asked if the icon size could be increased in the dashboard 'switch' node, and a solution was provided by @hotNipi as follows;
> !\[hotNipi\](https://github.com/FlowFuse/node-red-dashboard/assets/973580/b6088b95-87bc-46ed-aca0-213f1cce2a6b)
> 
> Font Awsome icons use a similar solution, for example \`fa-coffee fa-2xs\` to change icon size, and use the range \`fa-2xs\`, \`fa-xs\`, \`fa-2sm\`, \`fa-lg\`, \`fa-xl\`, \`fa-2xs\` and \`fa-2xl\`.  
> Would it be possible to integrate the css into the dashboard core css, so that sizing would be readily available 'out of the box'.
> 
> Maybe could be also be used for https://github.com/FlowFuse/node-red-dashboard/issues/955 and also https://github.com/FlowFuse/node-red-dashboard/issues/888

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [27 September 2024 16:22 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/5 "2024-09-27T16:22:15Z")

</div>

many thanks!  
Your first tip works ok for me 👍 🙂

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [27 September 2024 19:10 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/6 "2024-09-27T19:10:50Z")

</div>

there is still one little issue.  
the switch in a field of size 1 is right aligned. Is there a trick to center the switch in a field of size 1.  
I have no lable to be set, which normaly is left aligned.

in dashboard 1 the switch was automaticaly centered - meaning label and switch was centered, which makes sense.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [28 September 2024 11:32 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/7 "2024-09-28T11:32:53Z")

</div>

Hallo hotNipi,

many thanks for your support!  
As you can see I it works as I expected.  
Still the little problem of centering the switches remains.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cab0d9aaa89ffd186aa7a9f4f5c50ee611a5aec1.png)  
any suggestions for this little problem?

---

<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 September 2024 11:51 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/8 "2024-09-28T11:51:27Z")

</div>

You'll need to configure one ui\_template node to apply CSS for page

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

And for every switch add class name `centered-switch`

It works only if the switch has no label.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [28 September 2024 12:24 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/9 "2024-09-28T12:24:18Z")

</div>

> [@hotNipi](#):
>
> centered-switch

now it is perfect! 🙂 👍  
thanks again!

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

---

<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:** [28 October 2024 12:25 UTC](https://discourse.nodered.org/t/size-of-custom-mdi-switch-icon/91280/10 "2024-10-28T12:25:15Z")

</div>

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