如何设置Material UI图标样式？如何在按钮中居中Material UI图标？

Hey there! Let's break down your two Material UI icon-related questions with practical examples you can use right away.

1. 如何设置Material UI图标的样式？ #

You’ve got a few flexible options to style Material UI icons, depending on your use case:

方法一：内联样式（快速简单） #

直接给图标组件加style属性，适合临时或简单的样式调整：

import AddIcon from '@material-ui/icons/Add';

// 调整颜色、大小、边距等
<AddIcon style={{ color: 'darkgreen', fontSize: '28px', marginLeft: '10px' }} />

方法二：自定义类名（推荐用于复用样式） #

用Material UI的makeStyles创建可复用的样式类，适合需要在多个组件中使用的统一样式：

import { makeStyles } from '@material-ui/core/styles';
import AddIcon from '@material-ui/icons/Add';

const useStyles = makeStyles((theme) => ({
  customIcon: {
    color: theme.palette.primary.main, // 复用主题色更统一
    fontSize: theme.spacing(4), // 用主题间距单位适配不同屏幕
    backgroundColor: theme.palette.primary.light,
    padding: theme.spacing(1),
    borderRadius: '50%'
  }
}));

function MyComponent() {
  const classes = useStyles();
  return <AddIcon className={classes.customIcon} />;
}

方法三：全局样式（适合全局统一修改） #

如果想让所有同类型图标都用一样的基础样式，可以在全局CSS文件中设置：

/* 在你的全局样式文件中 */
.MuiSvgIcon-root {
  font-size: 20px;
  color: #333;
}

2. 如何在按钮中居中Material UI图标？ #

Getting icons aligned perfectly with button text is a common need—here are the most reliable ways:

方法一：用Button内置的startIcon/endIcon属性（最推荐） #

Material UI的Button组件专门提供了这两个属性，会自动处理图标与文字的间距和垂直居中，完全不用手动调样式：

import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';

// 图标在文字左侧
<Button variant="contained" color="primary" startIcon={<AddIcon />}>
  ADD
</Button>

// 图标在文字右侧
<Button variant="contained" color="primary" endIcon={<AddIcon />}>
  ADD
</Button>

方法二：手动用Flex布局调整 #

如果因为某些原因不能用startIcon，可以给Button设置Flex布局，确保图标和文字垂直居中：

import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';

<Button style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
  <AddIcon />
  ADD
</Button>

gap属性用来控制图标和文字之间的间距，比margin更直观且不易出问题。

方法三：微调图标对齐（针对已有代码的优化） #

像你原来的代码里用了bottom和right的定位，其实换成verticalAlign: 'middle'会更稳定，不会受Button的布局变化影响：

import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';

<Button>
  <AddIcon style={{ verticalAlign: 'middle', marginRight: '6px' }}/>
  ADD
</Button>

内容的提问来源于stack exchange，提问作者Weronika Marunowska