Chrome浏览器中Material Icons双色调图标无法显示的问题排查

问题情况 #

• 未对应用做任何修改，但Material Icons的双色调图标（使用material-icons-two-tone类）仅在Chrome浏览器中无法显示，Safari、Firefox等其他浏览器均正常
• 普通单色Material Icons（使用material-icons类）在所有浏览器都能正常显示
• 已在页面<head>中通过以下代码引入字体样式表：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
  

• 复现代码中，将<span class="material-icons-two-tone">assistant</span>改为<span class="material-icons">assistant</span>即可正常显示普通图标

可能原因 #

• Chrome字体缓存异常：Chrome对字体资源的缓存机制可能保留了旧的或损坏的缓存文件，导致双色调字体无法正常加载
• Google字体引入格式兼容性：Chrome对字体请求的参数解析更严格，原URL采用的CSS1格式在Chrome中可能无法正确识别双色调字体的资源
• Chrome隐私/安全设置干扰：比如启用了"阻止第三方Cookie"或类似安全设置，影响了Google字体资源的加载
• Chrome版本bug：特定版本的Chrome存在双色调字体渲染的兼容问题

修复方法 #

• 清除Chrome缓存
  打开Chrome设置 → 隐私和安全 → 清除浏览数据，勾选"缓存的图片和文件"，点击清除后重启浏览器

• 改用规范的CSS2格式引入字体
  将原<link>标签替换为以下代码，明确使用CSS2格式并添加display=swap参数，提升Chrome下的兼容性：

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Material+Icons+Two+Tone&family=Material+Icons+Round&family=Material+Icons+Sharp&display=swap">
  

• 强制指定双色调图标的字体样式
  在页面的<style>标签中添加以下CSS代码，确保字体属性正确应用：

  .material-icons-two-tone {
    font-family: 'Material Icons Two Tone';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  

• 检查Chrome隐私设置
  暂时关闭"阻止第三方Cookie"等可能影响资源加载的设置，测试图标是否恢复显示

• 更新Chrome到最新版本
  打开Chrome设置 → 关于Chrome，检查并安装最新版本，修复可能存在的版本兼容bug

复现代码 #

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
<style>
</style>
<script src=""></script>
<body>

<span class="material-icons-two-tone">assistant</span>
</body>
</html>

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