css - 如何在 Material-UI IconButton 中居中对齐自定义 SVG 图标

Question

我正在尝试生成一个如下所示的图标按钮：

到目前为止，我得到的是：

这是代码：

import { SvgIcon, IconButton } from '@material-ui/core';

import {ReactComponent as homemadePlayIcon} from "./play-icon.svg"

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>

    <SvgIcon component={homemadePlayIcon} />

</IconButton> 

如何将图标按钮内的图标居中对齐？

谢谢你，詹姆斯

Answer 1

通过使用带有--icon选项的@svgr（以保留 SVG 的 viewbox 属性）并在 IconButton 中包含生成的组件，我得到了预期的结果，如下所示：

import { IconButton } from '@material-ui/core';

import PlayIcon from "./icons/PlayIcon.js"

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)"}}>
    <PlayIcon />
</IconButton> 

Answer 2

用这个编辑它：

<IconButton onClick={this.playIconButtonClick} disableRipple={true} style={{color: "rgb(0,0,0,0)", width: '35px', height: '35px', backgroundColor: '#f5f5f5', boxShadow: "3px 3px 10px rgba(0, 0, 0, 0.2)", display: "flex", justifyContent: "center", alignItems: "center"}}>