Material Design Icons 是 Google 的 Material Design 里面包含的一组图标，你可以在它的网站上去下载需要的小图标 .. 也可以使用它的字体图标 ..

在设计里，使用这组图标的最简单的方法可以直接在页面上添加这行代码 ... 这里就是直接链接了在 google 字体里的 material icons 这种字体 ..

或者我们也可以把它下载到本地，就是自己存储它们 ..

可以使用 npm 或者 yarn 去安装一下 .. material-design-icons ...

这样会把它下载到 node_modules 目录的下面 ...

在这里可以找到 material-design-icons ..

我们只需要它里面的 icon-font .. 这里有个 material-icons.css，你可以在页面上链接使用这个样式表 ..

我配置了本地项目的服务器，你可以直接链接在 node_modules 里面的资源 ..

material-design-icons/iconfont/material-icons.css

这两个方法用其中的一个就行 .. 可以注释掉一个 ..

在我们的导航栏上面，可以去试一下 .. 放在 menu 元素的下面 .. 这样它跟 menu ，还有上面的 header 属于兄弟元素 ..

要添加一个图标，可以先用一个小 i 标签，不同的图标字体使用的方法都不太一样 .. material design 的图标字体要求我们在这个小 i 标签上加上 material-icons 这个类 ..

在这组标签里再输入要用的图标的名字 ... 这里我需要一个 search ...

现在，页面上会显示一个搜索图标，这个小图标就是 material design 里面的搜索图标 ..