React MUI 如何修改IconButton默认图标？无法替换图标问题求助

原因分析 #

你最开始的代码里主动在<IconButton>内部传入了<Visibility />（眼睛图标组件）作为子元素，这是初始状态显示眼睛图标的原因。IconButton本身确实没有默认图标，所有显示的图标都是你主动传入的子内容。
你后续修改的代码里同时传入了<ReplayIcon />和<Visibility />两个图标组件作为子元素，两个图标会叠加渲染，所以你会看到两个图标叠在一起的效果。

解决方法 #

1. 删掉<IconButton>内部不需要的<Visibility />代码，仅保留你想要的图标组件即可，参考代码：

<InputAdornment position="end">
  <IconButton>
    <ReplayIcon />
  </IconButton>
</InputAdornment>

2. 如果修改后仍显示眼睛图标，可按以下步骤排查：

• 清空浏览器缓存，重启本地开发服务，确认代码修改已经热更新生效
• 检查项目全局主题配置、全局CSS代码，是否有针对IconButton子元素、或者ReplayIcon组件的强制样式覆盖

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