Icon size using native switch -dashboard 2

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.

Doesn't D2 use Vuetify?

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

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

With CSS override like this

image

5 Likes

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. :sweat_smile:

There are more CSS helpers listed here:

@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.

1 Like

the solution from @hotNipi worked for my needs. Thanks

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 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.