CODEWITHSUNDEEP
reactjssvgimportgoogle-material-icons
Michael Lynch
Michael Lynch

Reputation: 3139

How can I size Google Material Icons in React?

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?

enter image description here

Upvotes: 1

Views: 3955

Answers (2)

Michael Lynch
Michael Lynch

Reputation: 3139

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.

Upvotes: 0

Julian Kleine
Julian Kleine

Reputation: 1547

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.

Upvotes: 2

Related Questions