Closed azdanov closed 6 years ago
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?
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.
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.
I didn't know about size="1em"
. This resolves this issue for me.
Thanks!
Made it one of the unit tests: https://github.com/Templarian/MaterialDesign-React/blob/master/tests/Icon.spec.tsx#L57
Would be nice to have an option of either using
em
orrem
.Using
em
's can be helpful to infer icon size from where it's currently used or use css, and can allowsize
prop to be optional.As an example, currently I'm using manually made icons this way: