在 Angular 开发中，常常需要使用到 Material Design 图标，而这些图标又是分散在不同的 SVG 文件中，在使用的过程中也需要对样式进行处理，十分繁琐。因此，开发者们创建了一系列的工具库来简化 Material Design 图标的使用，其中 npm 包 ny-angular-material-icons 就是一个很好的选择。本篇文章将详细介绍如何使用这个 npm 包，从而更加方便我们在 Angular 中使用 Material Design 图标。
安装之前的准备
在使用 ny-angular-material-icons 之前，需要安装 Angular Material，如果项目中已经使用了 Angular Material，则可以直接跳过这一步。
npm install --save @angular/material
安装 ny-angular-material-icons
在项目中安装 ny-angular-material-icons
npm install --save ny-angular-material-icons
导入模块
在需要使用 Material Design 图标的模块中，需要导入 MaterialModule 和 MaterialIconsModule。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------------- - ---- ---------------------------------------
------ - -------------- - ---- --------------------
------ - ------------------- - ---- ----------------------------
------ -----------
-----------
-------- -
------------------------
---------------
--------------------
--
-------- -
------------------------
---------------
--------------------
--
--
------ ----- --------- --使用 Material Design 图标
在 html 中可以直接使用 Material Design 图标，以下是一些示例。
-- -------------------- ---- -------
---- ---- ---
------- ----------------
------------------------
---------
---- ---- ---
----------------
------ -------- ---------------------
------- ---------- ----------
---------------------------
---------
-----------------
---- ----- ---
--------- -------------------------------在组件中也可以使用 IconRegistryService 将自定义 SVG 文件加载为 Material Design 图标。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ - ---- ----------------------------
------ - --------------- - ---- --------------------
------------
--------- -----------
--------- -
--------- --------------------------------
--
------ ----- ------------ ---------- ------ -
------------------------- ---------------- ---------- ------------- -
-- ----- --- --
------------------------
-----------
----------------------------------------------------------------------
--
-
---------- --
-总结
通过使用 npm 包 ny-angular-material-icons，我们可以大大简化 Material Design 图标的使用，特别是对于需要大量使用 Material Design 图标的项目，这个库将是一个非常好的选择。同时，在使用时需要注意，需要在模块中导入 MaterialModule 和 MaterialIconsModule，最后我们可以通过 IconRegistryService 加载自定义的 SVG 文件作为 Material Design 图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f963d1de16d83a66d73