Reactjs 如何在React中调整Google材质图标的大小？

我正在尝试在我的React应用程序中使用，但我无法确定它们的大小。我正在使用将它们作为React组件导入

从'@material ui/icons'导入{ArrowForward as iconrownright}

这些是我的样式，用于覆盖默认的
SvgIcon
样式：

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

出于某种原因，在我的SVG和路径之间有一个空格，我想删除它，但我不知道为什么它会出现在这里。如何删除此空间

您应该使用。有关演示用法，请参阅。
这些属性也适用于从
@material ui/icons
导入的图标

您可以将其与
fontSize
一起使用，也可以通过修改样式/类来使用。因此，您应该看看的实现。
在检查了实际的SVG之后，我了解到存在额外的空间，因为SVG中都有相同的方形路径。调整SVG的大小将调整方形路径的大小，而不一定是它内部的形状（在我的例子中是X）



正方形没有填充，所以你看不到，但它在那里（
）

我想这是一种保持图标一致性的尝试，但如果你不填充正方形，讽刺的是，这会使调整图标的大小变得更加麻烦。
我不知道这个库有多么固执己见。我不想介绍带有样式之类的
或
组件。我真的只想要SVG本身，所以我决定简化我的方法，只需单独下载SVG并像通常一样导入它们。谢谢你的提示。
<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>