html - 导入特定 Material 图标

Question

我正在创建一个使用 Google's Material Icons 的 Web 应用程序.我使用的几乎所有图标都是默认的“填充”样式，其中 1 个是“轮廓”样式。我使用以下 CSS 代码导入图标:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|');


这会导入两个 .woff 字体文件，一个用于默认的“Material Icons”字体系列，另一个用于“Material Icons Outlined”系列。

鉴于我只使用概述系列中的 1 个图标，有没有办法只导入该特定图标，而不是导入整个集合(不在本地保存)？

感谢任何帮助

Answer 1

要仅导入“填充”字体，请从网址中删除 |Material+Icons+Outlined|。

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

没有官方的 CDN 可以让你从网上抓取一张图片，所以你需要从 icon library 下载 png 或 svg。并自己托管。

请注意，每个字体文件只有 60KB-80KB 左右(点击下面的链接亲自查看)，因此如果您这样做是为了缩短加载时间，可能不会产生太大的影响。

filled woff2 outline woff2 .