为何无法同时使用两个Google Fonts Material Icons图标？

我从Google Fonts引入了导航所需的汉堡菜单（menu）图标和关闭（close）图标，但同一时间似乎只有一个能正常显示。

页面代码： #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close" />
    <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=menu" />
       
</head>

导航栏代码： #

<nav class="navbar">
            <a href="#" class="logo">Coffee <span>.</span></a>
            <ul class="menu-links">
            <span id="close" class="material-symbols-outlined">close</span>
              <li><a href="#">Home</a></li>
              <li><a href="#">Products</a></li>
              <li><a href="#">Testimonials</a></li>
              <li><a href="#">About Us </a></li>
              <li><a href="#">Contact us</a></li>
              </ul>
            <span id="menu-btn" class="material-symbols-outlined">menu</span>
        </nav> 

异常显示截图： #

解决方案 #

问题根源在于重复引入Material Symbols Outlined字体资源，后面的<link>标签会覆盖前面的配置，最终只有最后一个指定的图标能被正确加载。

只需将需要的图标名合并到同一个<link>标签中，用逗号分隔即可：

修改后的代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 预连接优化加载速度 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- 一次性引入需要的多个图标 -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=close,menu" />
</head>

这样配置后，close和menu图标就能同时正常显示，还能减少不必要的HTTP请求，优化页面加载性能。

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