如何修复Material Icons显示为文本的问题

问题根源 #

你遇到的问题是CDN引入的字体库版本与页面使用的图标类名不匹配：

• 你引入的是旧版Material Icons Sharp的CDN，但页面中使用的是新版Material Symbols的类名（material-symbols-sharp、material-symbols-outlined），两者不属于同一套图标体系，无法兼容。
• 页面同时用到了sharp和outlined两种风格的图标，但你只引入了sharp风格的CDN，导致两种风格的图标都无法正常渲染。

修复步骤 #

1. 替换CDN链接，引入对应风格的Material Symbols库
   新版Material Symbols需要按风格引入，若需同时使用sharp和outlined，替换head中的CDN链接为：

   <!-- 引入Outlined风格 -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
   <!-- 引入Sharp风格 -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
   

   若仅需Sharp风格，保留对应的CDN即可。

2. 确保类名与引入的风格匹配

   • material-symbols-sharp类对应Sharp风格图标
   • material-symbols-outlined类对应Outlined风格图标
     你的页面类名设置正确，无需修改，只需保证CDN与类名一一对应。

3. 添加基础CSS样式（可选但推荐）
   为图标统一设置基础样式，确保渲染效果一致：

   .material-symbols-sharp, .material-symbols-outlined {
     font-variation-settings:
     'FILL' 0,
     'wght' 400,
     'GRAD' 0,
     'opsz' 24;
     /* 可自定义大小、颜色 */
     font-size: 24px;
     color: #333;
   }
   

修改后的完整示例代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sales Dashboard</title>
  <!-- Material Symbols CDN -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <!-- stylesheet-->
  <link rel="stylesheet" href="./style.css">
  <style>
    .material-symbols-sharp, .material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
      font-size: 24px;
      color: #333;
    }
  </style>
</head>

<body>
  <div class="container">
    <aside>
      <div class="top">
        <div class="logo">
          <img src="./images/logo.png" alt="">
        </div>
        <div class="close" id="close-btn">
          <span class="material-symbols-sharp">close</span>
        </div>
      </div>
      <div class="sidebar">
        <a href="#">
          <span class="material-symbols-outlined">dashboard</span>
          <h3>Dashboard</h3>
        </a>
        <a href="#">
          <span class="material-symbols-outlined">dashboard</span>
          <h3>Detail Report</h3>
        </a>
        <a href="#">
          <span class="material-symbols-outlined">person</span>
          <h3>Team Member</h3>
        </a>
        <a href="#">
          <span class="material-symbols-sharp">trending_up</span>
          <h3>Top Selling Products</h3>
        </a>
        <a href="#">
          <span class="material-symbols-sharp">payments</span>
          <h3>Expenses</h3>
        </a>
        <a href="#">
          <span class="material-symbols-sharp">logout</span>
          <h3>Logout</h3>
        </a>
      </div>
    </aside>
  </div>
</body>

</html>

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