Add css to change icon size

[Paul-Reed]

A forum post asked if the icon size could be increased in the dashboard 'switch' node, and a solution was provided by @hotNipi as follows;

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 #955 and also #888

[hotNipi]

mdi-18px, mdi-24px, mdi-36px and mdi-48px are supported out of box.
With the CSS override mentioned above it can be customized to any size.
I think maybe it doesn't need any additions.

[Paul-Reed]

Thanks @hotNipi
You are quite correct, and makes a big difference visually.

Before -

...and adding mdi-48px

@joepavitt maybe close this issue??

[hotNipi]

Maybe just to add some words in related documents. There's more mdi- helper classes the one can use.

Size
mdi-18px mdi-24px mdi-36px mdi-48px

Rotate
mdi-rotate-45 mdi-rotate-90 mdi-rotate-135 mdi-rotate-180 mdi-rotate-225 mdi-rotate-270 mdi-rotate-315

Flip
mdi-flip-h mdi-flip-v

mdi-flip-* and mdi-rotate-* can't be used at the same time.

Spin
mdi-spin

Color
mdi-light mdi-light mdi-inactive mdi-dark mdi-dark mdi-inactive

But to say that they work everywhere it takes to at least try it before.

[joepavitt]

@hotNipi where did you find the list of utility classes? I can't find any suitable docs for mdi?

[hotNipi]

I do remember myself using some of those (not dashboard related) so did a bit digging
An old site here at the end of the page https://pictogrammers.github.io/@mdi/font/2.0.46/

I did look DB2 compiled index-xxxxx.css - they all exist.

[Paul-Reed]

I also found it for version 7 - https://pictogrammers.github.io/@mdi/font/7.4.47/
It's at the page bottom.

[joepavitt]

Thanks both, updated the PR to point to those docs