Materialize-css 图标介绍

Materialize-css 是一款基于 Material Design 设计语言的前端框架，它提供了丰富的 UI 组件和交互效果，其中还包括了众多图标。本文将着重介绍 Materialize-css 图标的使用方法和常见问题。

版本支持

Materialize-css 从 v1.0.0 版本开始引入了图标功能，目前已经更新到了 v1.0.0rc。由于旧版 Materialize-css 不包含图标功能，因此需要升级到 v1.0.0 或以上版本才能使用图标。

图标预览

Materialize-css 图标集包含了 900 多个图标，大部分是基于 Material Design 的标准图标，还包括了部分 Materialize-css 自带的特定图标。以下是图标集部分预览：

使用方法

Materialize-css 图标使用方法非常简单，可以通过 i 标签和 material-icons 类名来插入图标，如下所示：

<i class="material-icons">home</i>

其中 home 代表了要显示的图标名称。可以在 Materialize-css 官方网站 的图标集页面中查找到每个图标对应的名称。

需要注意的是，Materialize-css 图标默认采用了字体图标方式实现，因此理论上来说相对于图片等资源文件更加易于扩展和适应各种分辨率。

常见问题

图标与文字对齐问题

在某些场景下，Materialize-css 图标和文字并不会自动居中对齐，这时候我们可以通过 CSS 样式来处理：

<!-- HTML 代码 -->
<span class="icon-text"><i class="material-icons">home</i>Home</span>

/* CSS 代码 */
.icon-text {
  display: inline-flex;
  align-items: center;
}

图标大小调节

Materialize-css 图标默认大小为 24px，但是我们可以通过 CSS 样式来调节图标的大小：

<i class="material-icons small">home</i>
<i class="material-icons medium">home</i>
<i class="material-icons large">home</i>

其中 small、medium、large 代表了不同的尺寸，也可以自定义大小：

<i class="material-icons" style="font-size: 36px;">home</i>

更多样式

Materialize-css 图标还支持其他一些样式类来应用一些特殊的样式：

<i class="material-icons left">home</i>Home
<i class="material-icons right">home</i>Home
<i class="material-icons light-blue-text text-darken-4">home</i>

其中 left 和 right 用于在图标左/右侧显示文本，light-blue-text 和 text-darken-4 则是 Materialize-css 自带的文本样式。

总结

Materialize-css 图标使用简单，丰富的图标集也能满足各种需求，并且支持多种样式和扩展方法。同时也需要注意图标和文字对齐问题，以及图标大小的调节问题。更多关于 Materialize-css 图标的使用和扩展方法，可以参考官方文档。