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.

With CSS override like this [image] [image]

Doesn't D2 use Vuetify? [image] Icon component — Vuetify The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and mor...

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.

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]

Does mdi-2x not work. See GitHub - mervick/material-design-icons: Material Design Icons For other options

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…

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

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 which was raised recently.

the solution from @hotNipi worked for my needs. Thanks

[image] joepavitt: please raise an issue Issue Add css to change icon size · Issue #965 · FlowFuse/node-red-dashboard · GitHub 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 :wink:

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 inves…

Node-RED

Node-RED Forum

Icon size using native switch -dashboard 2

Dashboard

hotNipi 12 June 2024 07:24 6

With CSS override like this

Size of custom MDI switch icon

Topic		Replies	Views
Ui-switch icon size Dashboard dashboard-2	8	322	25 August 2024
Size of custom MDI switch icon Dashboard dashboard-2	8	204	28 September 2024
Edit switch node Dashboard	2	1370	9 October 2020
How to increase material icon size for switch Dashboard	8	2882	8 October 2020
Icon size and appearance Dashboard	12	238	7 November 2025

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Icon size using native switch -dashboard 2

Related topics