导入特定材质图标

Posted 2023-02-22

【中文标题】导入特定材质图标

【英文标题】：Importing specific material icon

【发布时间】：2020-07-01 18:12:44

【问题描述】：

我正在创建一个使用 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 个图标，有没有办法只导入该特定图标，而不是导入整个集合（而不在本地保存）？

感谢任何帮助

【参考方案1】：

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

不想添加自定义字体，所以下载了图标，编辑了 SVG 中的 fill="black" 参数以匹配我所追求的颜色，并简单地将其用于 img 标签 <img src="assets/delete-icon.svg">。

【参考方案2】：

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

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

没有官方的 CDN 允许您只从网络上抓取一张图片，因此您需要从 icon library 下载 png 或 svg 并自行托管。

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

filled woff2outline woff2.

【讨论】：

我实际上不明白你在这里提出的解决方案是什么

抱歉，我正在尝试多任务处理。看看更新是否有帮助。

所以答案是不能下载单个图标，除非有人另有建议