# Icon size using native switch -dashboard 2

**URL:** <https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [11 June 2024 00:46 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611 "2024-06-11T00:46:26Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![pcpaulo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pcpaulo/32/2971_2.png) [@pcpaulo](https://discourse.nodered.org/u/pcpaulo)\
**Post date:** [11 June 2024 00:46 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/1 "2024-06-11T00:46:26Z")

</div>

how i can increase size the icon using native switch for dashboard 2.0

for dash 1.0 i used fa-lightbulb-o fa-3x

since dash 2.0 uses mdi, i could not find how to increase the size.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 June 2024 12:05 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/2 "2024-06-11T12:05:10Z")

</div>

Doesn't D2 use Vuetify?

> **[Icon component — Vuetify](https://vuetifyjs.com/en/components/icons/#usage)**
>
> The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and mor...

---

<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:** [11 June 2024 16:24 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/3 "2024-06-11T16:24:14Z")

</div>

It doesn't mean that every supported icon provider is part of dashboard package. If you won't to have something which is not included by default it takes to serve resources from shared folder and to code it to take effect.

---

<div class="post-metadata">

**Author:** ![pcpaulo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pcpaulo/32/2971_2.png) [@pcpaulo](https://discourse.nodered.org/u/pcpaulo)\
**Post date:** [11 June 2024 20:13 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/4 "2024-06-11T20:13:50Z")

</div>

Icon is working, my doubt is how to increase the icon size using switch in custom area. In my example i am using ab-testing icon. my olny problem how i address the size

 ![switch](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/3735557cdad842e161a51e2fea9cd1bb0dd5af08.jpeg)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [11 June 2024 20:52 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/5 "2024-06-11T20:52:11Z")

</div>

Does mdi-2x not work. See [GitHub - mervick/material-design-icons: Material Design Icons](https://github.com/mervick/material-design-icons)  
For other options

---

<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:** [12 June 2024 07:24 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/6 "2024-06-12T07:24:51Z")

</div>

With CSS override like this

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

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

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [12 June 2024 15:09 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/7 "2024-06-12T15:09:59Z")

</div>

I faced the same issue. I used the helper CSS classes `mdi-18px`, `mdi-24px`, `mdi-36px` and `mdi-48px`.  
It was hard to find out those even existed, the docs aren't really clear on that. It seems to depend on how the icons are used (Webfont, SVG, ...).

Although @hotNipi's solution is more flexible. Didn't think of that. 😅

There are more CSS helpers listed here:

- [Material Design Icons](https://pictogrammers.github.io/@mdi/font/7.4.47/)
- [Getting Started with the Webfont - Docs - Pictogrammers](https://pictogrammers.com/docs/library/mdi/getting-started/webfont/#basic-example)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [12 June 2024 15:38 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/8 "2024-06-12T15:38:04Z")

</div>

@joepavitt could you consider adding this CSS (other sizes too) to the default dashboard CSS?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 June 2024 15:50 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/9 "2024-06-12T15:50:27Z")

</div>

Absolutely, please raise an issue (or event better a PR) and we'll get something added in. This may also be a better workaround for [Custom icon size in side bar · Issue #955 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/955) which was raised recently.

---

<div class="post-metadata">

**Author:** ![pcpaulo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pcpaulo/32/2971_2.png) [@pcpaulo](https://discourse.nodered.org/u/pcpaulo)\
**Post date:** [12 June 2024 16:05 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/10 "2024-06-12T16:05:07Z")

</div>

the solution from @hotNipi worked for my needs. Thanks

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [12 June 2024 18:32 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/11 "2024-06-12T18:32:14Z")

</div>

> [@joepavitt](#):
>
> please raise an issue

Issue [Add css to change icon size · Issue #965 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/965) raised.

I lack CSS experience to submit a PR for this, but maybe someone else would like to dive in and give it a go 😉

---

<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:** [12 June 2024 19:22 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/12 "2024-06-12T19:22:30Z")

</div>

There's other problems to be rise up at some point when custom icons for switch are in use. As the buildup is very different from what is in use with default icons (button in use instead of input control combo) the heights of the switch widgets will differ as they depend on content size. I did investigation over possible solutions, there's fine CSS override but as always-it depends on the users design decisions so no reason to just share as solution.

Ask if needed.

---

<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 June 2024 19:23 UTC](https://discourse.nodered.org/t/icon-size-using-native-switch-dashboard-2/88611/13 "2024-06-26T19:23:06Z")

</div>

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