Material Design 是一种 Google 设计语言，它提供了 Material Icons，这是一组由 Google 设计的图标集合。这里将告诉您如何在前端项目中使用这些图标。这篇文章的目标读者是希望学习如何在Material Design 中使用图标的前端开发者。
在项目中引入 Material Icons
要使用 Material Design 中的图标，需要先将它们的库引入项目中。
有多种方式可以引入这个库，但在这里我们将使用 link 标签引入，这是一种简单的方式，并且没有其他复杂的配置。您可以在您的 HTML 文件中添加以下代码：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
在项目中使用 Material Icons
在引用 Material Icons 的库之后，您需要通过 HTML 或 CSS 将图标添加到您的项目中。
通过 HTML 添加图标
您可以在 HTML 文件中使用 i 标签，其中 class 属性为 material-icons。加入图标名作为标签内容。例如：
<i class="material-icons">shopping_cart</i>
通过 CSS 添加图标
还可以通过 CSS 的 method 来添加 Material Icons。用 CSS 的 font-family 属性，fonts.gmediate.io 中的所有 Material Icons 显示为 “Material Icons” 字体。可以像使用其他字体一样使用 Material Icons。例如：
-- -------------------- ---- -------
----- -
------------ --------- -------
------------ -------
----------- -------
---------- -----
-------- -------------
------------ --
--------------- -----
--------------- -------
---------- -------
------------ -------
---------- ----
--
- -- ------- -----------------------------
- --------------- --- --
--
-------- -
-------- -------
-
-官方文档 Reference
我们可以在 google 官方网站中查看 Material Icons 的全部内容。在这里阅读更多完整的参考文档。
总结
本文对前端项目中如何引入并使用 Material Icons 进行了介绍。你可以使用 HTML 标签和 CSS 来添加图标到你的项目中。这些图标可以在很大程度上增强你的应用程序的美观性。同时，了解 Material Design 语言和 Material Icons 的规则和最佳实践也非常重要，可以提高我们在实际开发中使用图标的效果和效率。
您希望使用 Material Design 的 Web 应用中还有更多功能预期的样式和组件，您可以到Materialize官网里面查看更多组件使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dd537968c7c53b0c73e11