导入特定的材料图标。

Question

我正在创建一个使用Google的Material Icons的网络应用程序。 我使用的几乎所有图标都是默认的“填充”样式，其中一个是“轮廓”样式。 我使用以下CSS代码导入图标：@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|'); 这将导入两个.woff字体文件，一个用于默认的'Material Icons'字体系列，另一个用于'Material Icons Outlined'系列。 鉴于我只使用了轮廓系列中的1个图标，是否有一种方法可以仅导入该特定图标，而不是导入整个图标集（无需在本地保存）？ 感谢任何帮助。

- Trever Thompson

Answer 1

如果只想导入“填充”字体，请从网址中删除 |Material+Icons+Outlined|。

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

没有官方的CDN让你从网络中获取单个图片，所以你需要从图标库下载png或svg格式的图片并自行托管。

请注意，每个字体文件仅约60KB-80KB（点击下面的链接可自行查看），因此，如果你这样做是为了提高加载速度，可能不会有太大的差异。

实心woff2 轮廓woff2。

- sallf

---

我其实不明白你在这里提出的解决方案是什么。 - Trever Thompson

抱歉，我试图多任务处理。看看更新是否有帮助。 - sallf

因此，答案是除非有人提出其他建议，否则无法下载单个图标。 - Trever Thompson

Answer 2

我遇到了类似的问题，但决定自己托管图标。

不想添加自定义字体，所以下载了图标，编辑了SVG内部的fill="black"参数以匹配我想要的颜色，然后在<img src="assets/delete-icon.svg">中使用它。

- Dāvis