Handle relative sizes

[azdanov]

Would be nice to have an option of either using em or rem.

Using em's can be helpful to infer icon size from where it's currently used or use css, and can allow size prop to be optional.

As an example, currently I'm using manually made icons this way:

import React, { SFC } from "react";

const Tag: SFC = props => (
  <svg viewBox="0 0 24 24" width="1em" height="1em" {...props}>
    <path
      fill="inherit"
      fillRule="evenodd"
      d="..."
    />
  </svg>
);

export default Tag;

[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