如何在 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

通過將@svgr與 --icon 選項一起使用（以保留 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"}}>