Handle relative sizes

[templarian]

Handle relative sizes

[Templarian]

I make the assumption that most use a 16px root and the icons are 24dp at native 1:1 screens. So as you saw I apply scaling of 1 as 1.5rem (style="width: 1.5rem").

Since 99% of users are using these along with themes where 16px is the norm I think it might be best to keep this and let users override it with CSS.

I went back and forth on this, but will probably be following this in the Angular and VueTS components.

Are you using the icons at a smaller than 24px size?

[azdanov]

Oh, I see.

Here are some examples on my website: https://azdanov.js.org/blog (WIP).

In menu larger, in meta information for posts smaller, and footer also small.

[Templarian]

Yea, that kind of works, but I'm on a Surface Pro, so they look good on these high resolution displays).

For smaller icons you could just do <Icon path={mdiTag} size="1em"/>, or override it in CSS.

At work I'm mostly using <Icon size={1.5}/> for 36px, and <Icon size={2}/> for 48px. But I'm still targeting a lot of users on 1:1 displays.

[azdanov]

I didn't know about size="1em". This resolves this issue for me.

Thanks!

[Templarian]

Made it one of the unit tests:
https://github.com/Templarian/MaterialDesign-React/blob/master/tests/Icon.spec.tsx#L57