Material Design 是谷歌公司推出的一种视觉设计语言，旨在提供具有一致性和可重用性的 UI 元素。其中，Material Icons 是一组由 Google 设计师制作的向量图标库。
然而，在实际开发中，我们可能需要在不联网的情况下使用 Material Icons，这时就需要将其离线托管。
下载 Material Icons
首先，我们需要从 Google 官方网站 下载 Material Icons。可以选择下载 .zip 格式或者直接通过链接引用 css 和 woff2 文件。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="preload" as="font" href="https://fonts.gstatic.com/s/materialicons/v98/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2" type="font/woff2" crossorigin>
将 Material Icons 离线保存
我们可以将下载的 Material Icons 解压到本地文件夹，并在项目中引用。但是，为了避免每次都要手动下载和更新图标库，我们可以使用工具将其自动下载并保存到本地。
以 Node.js 为例，我们可以使用 download 模块实现自动下载：
-- -------------------- ---- -------
----- -------- - --------------------
----- -------- - ----------------------------------------------------------
----- ------- - -----------------------------------------------------------------------------------
----- --------- - ------------
----- -------- - -----------------------
------ -- -- -
--- -
----- ------------------ ---- ---------- ------------
----- ----------------- ---- ---------- -----------
--------------------- ----- --------
- ----- ----- -
----------------------- ----- ------- -------
-
-----运行上述代码后，Material Icons 就会被下载并保存到当前目录下。
在项目中使用 Material Icons
在项目中引用本地的 Material Icons 可以提高网页加载速度和用户体验。这里我们使用 link 标签引用本地的 CSS 文件：
<link rel="stylesheet" href="./icons.css">
同时，我们还需要指定字体文件的路径，并为其设置唯一的 font-family 名称，使得页面能够正确渲染 Material Icons。
-- -------------------- ---- -------
---------- -
------------ --------- -------
----------- -------
------------ ----
---- --------------- -------- -------------------------------
----------------------------- ----------------
-
--------------- -
------------ --------- -------
------------ -------
----------- -------
---------- -----
-最后，我们可以在 HTML 中使用 span 标签来添加 Material Icons 图标：
<span class="material-icons">favorite</span>
上述代码会显示一个“心形”图标，其实际效果取决于 class 名称所代表的图标名称。
总结
本文通过 Node.js 模块下载和本地引用 CSS 文件的方式，详细介绍了如何离线托管 Material Icons。相信读者通过本文的学习，可以掌握离线托管 Material Icons 的方法，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29666