material design lite学习（六）图标

前几篇博文的次序几乎都遵循官方提供的MDL教程的次序。但是这一篇博文，却准备打乱次序，首先介绍图标。因为在后续介绍的按钮和徽章元素中，都需要用到图标。目前，material design设计了一系列的图标，可以同时被android app和web页面所使用。这些图标覆盖面极其广泛，可以满足我们绝大部分的界面开发需求。博文 material design lite定义的图标总结对material design定义的图标做了详细的总结归纳，供大家参考。接下来介绍如何在HTML中使用MDL图标。

看下面的代码。

        <main class="mdl-layout__content">            <i class="material-icons">add</i>        </main>

代码产生的图标如下图所示。

从上面的代码可以看到要引入一个图标非常容易，只需要添加一个i标签，这个标签的css类为material-icons，标签的内部text是图标的id。例如，上图显示的加号图标的id为add。在博文material design lite定义的图标总结中，列出了图标图形与图标id的对应关系。

除此之外，我们还可以通过style设置图标的大小和颜色。见下面代码。

<main class="mdl-layout__content">            <i class="material-icons" style="font-size: 20pt; color: black">add</i>            <i class="material-icons" style="font-size: 30pt; color: darkgoldenrod">add</i>            <i class="material-icons" style="font-size: 40pt; color: darkred">add</i>            <i class="material-icons" style="font-size: 50pt; color: darkorchid">add</i>        </main>

上面的代码生成如下图标。