在前端开发中，图标扮演着至关重要的角色，它们能够美化我们的页面，提升用户体验，同时也可以节省开发时间。在本文中，我们将介绍如何使用 mdi-angularjs 这个 npm 包来使用 Material Design 风格的图标。
mdi-angularjs 简介
mdi-angularjs 是一个基于 AngularJS 实现的 Material Design 风格图标库，在 Material Design Icon 网站的基础上添加了 AngularJS 指令和过滤器，可以方便地在 HTML 模板中使用。
安装 mdi-angularjs
npm 包 mdi-angularjs 已经可以通过 npm（或者 yarn）直接安装，可以执行以下命令进行安装：
npm install mdi-angularjs
使用 mdi-angularjs
添加依赖之后，我们需要在应用模块中注入 mdiAngular 模块，从而使用其中的指令和过滤器。示例代码如下：
var myApp = angular.module('myApp', ['mdiAngular']);在 HTML 模板中，我们使用 mdi-icon 指令来添加图标。可以使用 name 属性指定图标名称，也可以使用 size 属性来指定图标大小。示例如下：
<md-icon name="account" size="24"></md-icon>
另外，我们还可以使用 mdiFilter 过滤器来在文本中添加图标。示例如下：
<p>这是一段包含 <span ng-bind-html="'menu'></span> 图标的文本。</p>
总结
通过使用 mdi-angularjs，我们可以快速方便地在 AngularJS 应用中使用 Material Design 风格的图标，提高我们的开发效率和用户体验。希望本篇文章能够对前端开发者有一定帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3b1d8e776d08040a07