如何在 Material UI 按钮的角落放置一个图标答案

【问题标题】：How to put an icon on in the corner of a Material UI button如何在 Material UI 按钮的角落放置一个图标
【发布时间】：2021-02-08 02:16:35
【问题描述】：

如何在一个 Material UI 按钮的角落放置一个图标？

现在我拥有的是这个，图标就在标题旁边。我希望将图标移动到按钮的右下角......知道如何实现这一点吗？谢谢！

export default function CardButton() {
    return (
        <Button
            variant="contained"
            style={{
                height: 220,
                width: 275,
                margin: '1vh',
            }}
            color="secondary"
        >
            <Typography variant="button" style={{fontSize:'24px'}}>title</Typography>
            <AddIcon/>
        </Button>
    )
}

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

使用position: absolute 定位图标。

https://stackblitz.com/edit/react-ts-a6phy9

【讨论】：

【解决方案2】：

按钮组件

<Button
    variant="contained"
    color="primary"
    fullWidth
    endIcon={<img src={your Icon source } />}
    className={classes.button}
  >
    Send
  </Button>

样式

export const useStyles = makeStyles((theme) => ({
  walletContainer: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "10px 20px",
    backgroundColor: theme.palette.primary.button,
    width: "500px",
    margin: "20px",
    outline: "none",
    border: "none",
    borderRadius: "6px",
  },
}));

【讨论】：