如何使用Material Design图标新主题：Outlined、Rounded、Two-Tone和Sharp？

我之前也遇到过这个问题，后来搞清楚了——完全可以像基线版那样通过Web Fonts+HTML内联标签使用这些新主题，官方文档确实没讲清楚，我来给你梳理正确的用法：

1. 正确引入对应主题的Web Fonts #

新主题不是通过给原链接加style参数实现的，每个主题对应独立的字体家族，所以需要单独引入：

<!-- 按需引入你需要的主题，可同时引入多个 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- 原Filled/Baseline主题 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> <!-- Outlined主题 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Rounded" rel="stylesheet"> <!-- Rounded主题 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet"> <!-- Two-Tone主题 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet"> <!-- Sharp主题 -->

2. 使用对应主题的专属CSS类 #

每个主题有自己的专属类名，不能混用原material-icons类，正确写法示例：

<!-- Filled/Baseline 版本 -->
<i class="material-icons">account_balance</i>

<!-- Outlined 版本 -->
<i class="material-icons-outlined">account_balance</i>

<!-- Rounded 版本 -->
<i class="material-icons-rounded">account_balance</i>

<!-- Two-Tone 版本 -->
<i class="material-icons-two-tone">account_balance</i>

<!-- Sharp 版本 -->
<i class="material-icons-sharp">account_balance</i>

为什么你之前的尝试无效？ #

• 你试过的account_balance_outlined命名方式：原Filled字体库中没有这个字形，所以无法显示；
• 给原链接加&style=outlined：这个参数仅适用于部分Google Fonts的常规字体变体，但Material Icons的新主题是独立的字体资源，不支持这种写法。

这样就能正常显示各个主题的图标了，完全不需要下载SVG/PNG本地使用，和基线版的使用体验一致。

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