CODEWITHSUNDEEP
cssreactjsmaterial-ui
kfs214
kfs214

Reputation: 63

Best Practice to adjust height of Material UI Icon

I put two icons from Material UI Icons in a row. The heights themselves are same: 24px. But the height of path is different. One is 18px and the other is 22px. They don't look cool.

How can I adjust the height? I mean "the height that users see".

import {
  Delete,
  FileCopy
} from "@material-ui/icons";

...

<Box display="flex">
  <FileCopy onClick={handleCopy} />
  <Delete onClick={handleDelete} />
</Box>

I tried setting the the height of SVG, it made vertical align ugly...

Upvotes: 1

Views: 6736

Answers (2)

N G
N G

Reputation: 156

The icons have a fontSize property - e.g. <HomeIcon fontSize="large" />.

You can also set it explicitly - <DeleteIcon style={{fontSize: "10px"}}/>.

Upvotes: 5

Ross Moody
Ross Moody

Reputation: 943

It's tough to answer this question without more context of the components and what you can pass to them and what is being returned from them.

Assuming <FileCopy /> is returning an SVG element that you can pass valid svg properties to, the correct way to adjust the size would be to pass it height and width attributes.

<FileCopy height='48' width='48' />

Another way to think about this is the svgs likely have a viewBox that acts as a canvas. The height and width properties of the svg will change the size of the viewBox/canvas with the icon/paths inside it scaling along with it.

<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='24' width='24'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height='48' width='48'><circle fill="#FF4500" cx="10" cy="10" r="10"/><path fill="#FFF" d="M16.67 10a1.46 1.46 0 00-2.47-1 7.12 7.12 0 00-3.85-1.23L11 4.65l2.14.45a1 1 0 10.13-.61L10.82 4a.31.31 0 00-.37.24l-.74 3.47a7.14 7.14 0 00-3.9 1.23 1.46 1.46 0 10-1.61 2.39 2.87 2.87 0 000 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 000-.44 1.46 1.46 0 00.81-1.33zm-10 1a1 1 0 111 1 1 1 0 01-1-1zm5.81 2.75a3.84 3.84 0 01-2.47.77 3.84 3.84 0 01-2.47-.77.27.27 0 01.38-.38A3.27 3.27 0 0010 14a3.28 3.28 0 002.09-.61.27.27 0 11.39.4zm-.18-1.71a1 1 0 111-1 1 1 0 01-1.01 1.04z"/></svg>
</div>

Upvotes: 1

Related Questions