如何根据Web新主题使用Materialize轮廓图标？

我之前做项目时正好踩过这个坑！完全不用费劲下载PNG图片，Material Icons本身就支持通过CSS类直接切换你提到的五种样式，效率高还灵活。

核心操作：用专属类切换样式 #

每种图标样式都对应一个特定的类名，只要引入对应字体资源，给图标元素加上类就能直接生效：

• Filled（填充）：默认样式，直接用基础类 <i class="material-icons">home</i> 就行
• Outlined（轮廓）：添加 material-icons-outlined 类 → <i class="material-icons-outlined">home</i>
• Rounded（圆角）：添加 material-icons-round 类 → <i class="material-icons-round">home</i>
• Two Tone（双色调）：添加 material-icons-two-tone 类 → <i class="material-icons-two-tone">home</i>
• Sharp（锐利）：添加 material-icons-sharp 类 → <i class="material-icons-sharp">home</i>

别忘了加载对应字体资源 #

要让这些样式生效，必须先加载对应样式的字体文件。如果用CDN的话，可以把需要的字体家族都包含在引入标签里（只用到部分样式的话，也可以只引入对应的）：

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

如果是本地部署，你可以从Material Icons官方渠道下载完整字体包，然后通过CSS的@font-face规则引入到项目中。

为啥之前只显示旧版默认图标？ #

你碰到的“所有类别图标显示链接一致”的问题，本质是只加载了默认的Filled样式字体，其他样式没有对应的字体资源支撑，所以不管选哪个类别，都只能显示默认的填充图标。用上面的类名+对应字体的方式，就能直接切换不同样式了，根本不用单独下载图片。

这种矢量字体的方式不仅效率高，图标缩放还不会失真，还能通过CSS轻松修改颜色、大小，比用PNG方便太多啦！

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