MUI v5引入Font Icons后Icon组件图标无法显示如何解决

按照以下优先级逐一排查即可解决问题：

• 首先验证字体资源是否加载成功
  打开浏览器开发者工具，切换到Network面板筛选CSS类型请求，确认Material Icons字体样式请求状态码为200，没有被广告拦截插件、公司网络防火墙拦截。如果请求失败，将字体文件下载到本地项目中引入，不要依赖外部公共CDN。
  同时确认字体引入链接放在根目录index.html的<head>标签内部，不要放在<body>末尾或者业务组件中动态插入，避免组件首次渲染时字体资源还未加载完成。
• 检查图标写法与组件属性匹配度
  注意：你当前使用的file_download命名本身符合规范，需要额外确认所有图标名均为全小写格式，单词之间用下划线连接，不要使用驼峰写法。
  如果你后续要使用Outlined、TwoTone、Round等其他风格的Material Icons，必须给Icon组件传入对应的baseClassName属性，否则会匹配不到字形。仅引入默认常规版字体时不需要加该属性，保持默认配置即可。
  对应不同风格的写法参考：

  // 描边风格图标
  <Icon baseClassName="material-icons-outlined">file_download</Icon>
  // 圆角风格图标
  <Icon baseClassName="material-icons-round">file_download</Icon>
  

• 排查全局样式覆盖问题
  选中页面渲染出的Icon节点，在开发者工具Computed面板检查font-family属性，确认计算后的值包含'Material Icons'。如果被全局CSS重置规则、其他第三方UI库样式覆盖，可以手动给组件指定字体族：

  <Icon sx={{ fontFamily: 'Material Icons' }} color="inherit">file_download</Icon>
  

  同时检查全局样式是否给通配符*选择器设置了font-feature-settings、font-variation-settings属性，这类属性会干扰图标字体的字形渲染，需要在Icon组件作用域内将这类属性重置为初始值。
• 校验项目依赖完整性
  确认项目中没有混装v4版本的@material-ui/core和v5版本的@mui/material，版本混装会导致组件内部样式映射错乱。
  检查是否安装了MUI v5要求的peer依赖@emotion/react、@emotion/styled，缺失依赖会导致组件样式完全失效，执行对应命令补全即可：

  npm install @emotion/react @emotion/styled
  # yarn用户执行
  yarn add @emotion/react @emotion/styled
  

快速定位问题边界：可以先在页面中写入原生字体图标标签做测试

<span class="material-icons">file_download</span>

如果原生标签也无法正常显示图标，问题出在字体引入环节；如果原生标签显示正常，仅MUI Icon组件不显示，问题出在组件配置、样式覆盖或者依赖安装环节。

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