How can I size Google Material Icons in React?

Question

I'm trying to make use of the Google Material Icons in my React app and I'm having trouble sizing them. I'm importing them as React components using @material-ui/icons.

import { ArrowForward as IconArrowRight } from '@material-ui/icons';

These are my styles that are meant to override the default SvgIcon styles:

svg {
  display: inline-block;
  width: auto;
  height: 40px;
}

For some reason, there is a space between my SVG and path that I'd like to remove but I don't know why it's there in the first place. How can I remove this space?

score 2 · Answer 1 · answered Nov 04 '19 at 16:53

2

You should use an Icon. For a demo usage please see here. These properties also apply to icons imported from @material-ui/icons.

You can use it with fontSize or by getting into modifying styles/classes. Therefore you should take a look at the implementation of Icon.

answered Nov 04 '19 at 16:53

Julian Kleine

1,539
6
14

I didn't realize how opinionated this library is. I don't want to introduce an `` or `` component with styles and such. I really just want the SVG itself, so I've decided to simplify my approach and just download the SVGs individually and import them as I normally would. Thanks for the tip though. – Michael Lynch Nov 04 '19 at 20:18

score 0 · Answer 2 · answered Nov 04 '19 at 21:48

After inspecting the actual SVGs, I've learned that the extra space is there because the SVGs all have the same square path in them. Sizing the SVG will size the square path and not necessarily the shape inside of it (in my case, the X).

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

The square is without a fill so you can't see it but it's there (<path d="M0 0h24v24H0z" fill="none"/>).

I suppose this is an attempt to keep the icons consistent, but if you're not filling the square, it ironically makes sizing your icons more cumbersome.

How can I size Google Material Icons in React?

2 Answers2