如何合理调整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
相关产品推荐
相关产品推荐

