Materialdesign: Resizing

[AndreaRylander]

Hi,

is it possible to resize the icons??

[PeterShaggyNoble]

Yes.

(Can't provide more detail than that without more detail from you! 😆 What format are you asking about? Webfont, SVG, PNG, something else?)

[AndreaRylander]

SVG :)

[MrGrigri]

Just maintain the `viewBox="0 0 24 24" and then either with CSS or inline attributes, set the width and height.

<svg width="48" height="48" viewBox="0 0 24 24">
  <path d="M19.78,11.78L18.36,13.19L12,6.83L5.64,13.19L4.22,11.78L12,4L19.78,11.78Z"/>
</svg>

OR

svg {
  width: 2rem;
  height: 2rem;
}

<svg viewBox="0 0 24 24">
  <path d="M19.78,11.78L18.36,13.19L12,6.83L5.64,13.19L4.22,11.78L12,4L19.78,11.78Z"/>
</svg>

[AndreaRylander]

Thank you !

[MrGrigri]

@AndreaRylander, just as an FYI, I typically use both methods. That's because the inline attribute converts to pixels. Without setting the inline attributes there is a rendering glitch. The SVG appears large because the HTML has rendered and the icon will be huge until the CSS is rendered. I also only work with rems and ems because of accessibility, and because of that, the inline attributes won't work properly for me.