You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何合理调整MUI SVG图标大小并适配Button组件?

Material Icons 正确使用与自定义尺寸的最优方案

我想了解正确使用Material Icons并按需自定义/调整其大小的最佳方式。我尝试将MoreHorizIcon嵌套在Button组件中,代码如下:

<Button variant="outlined">
    <MoreHoriz fontSize="large" sx={{}} />
</Button>

这导致该按钮的高度比其他带文本内容的按钮更高,原因是图标为方形,未进行样式覆盖的情况下会增加按钮的整体高度。我尝试过几种调整方式,但都存在不足:

  • 通过sx={{}}降低svg的height属性,导致图标变形;
  • 使用负边距抵消按钮内边距,虽有效果但不够规范;
  • 修改viewBox和height属性,效果接近预期,但不确定是否为最优方案。

我想知道是否有更合理的实现方式,同时发现GitHub上有类似需求的相关讨论。

内容的提问来源于stack exchange,提问作者Sujit Kumar Singh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 22:40:53