如何调整Material UI图标大小？图标与按钮尺寸不匹配

方法1：直接给图标设置size属性 #

Material UI图标组件支持size属性，可选预设值small/medium/large，也可直接传入数字（单位为px）来精准控制：

<Button variant="outlined" startIcon={<FacebookIcon size="small" />}>
  分享到Facebook
</Button>

精细自定义尺寸示例：

<Button variant="outlined" startIcon={<FacebookIcon size={20} />}>
  分享到Facebook
</Button>

方法2：通过sx样式直接定义宽高 #

使用sx属性覆盖图标的宽高，还可调整内边距让图标与按钮布局更贴合：

<Button variant="outlined" startIcon={<FacebookIcon sx={{ width: 18, height: 18, marginRight: 1 }} />}>
  分享到Facebook
</Button>

方法3：配合按钮size属性统一适配 #

给按钮设置size属性后，图标会自动匹配按钮尺寸，无需单独调整图标：

<Button variant="outlined" size="small" startIcon={<FacebookIcon />}>
  分享到Facebook
</Button>

额外提示：优化空按钮的视觉问题 #

你的代码中按钮无文本内容，也会导致图标显得不协调。如果仅需展示图标，建议改用IconButton组件：

<IconButton variant="outlined">
  <FacebookIcon />
</IconButton>

内容的提问来源于stack exchange，提问作者mai mohamed