Materialize CSS提供了丰富的google原生图标集, 可以从以下位置下载原生设计规格。Materialize CSS支持的图标库是Google Material图标, 字体真棒图标和引导图标。可以从中选择不同的图标原生图标。
库和用法：要使用这些图标, 请在HTML代码的<head>部分中添加以下行。
<link href =" https://fonts.googleapis.com/icon?family=Material+Icons" rel ="样式表">
然后, 要使用图标, 请在HTML元素的<i>部分中提供图标的名称。
<i class="material-icons">add</i>原生图标大小：Materialize CSS提供了四种尺寸的图标：小, 小, 中, 大。小型, 小型, 中型和大型的尺寸分别为1雷姆, 2雷姆, 4雷姆和6雷姆。
<i class = "material-icons tiny">add</i>
<i class = "material-icons small">add</i>
<i class = "material-icons">add</i>
<i class = "material-icons medium">add</i>
<i class = "material-icons large">add</i>例子：
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet">
<!-- Compiled and minified CSS -->
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script type = "text/javascript" src =
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<!--Let browser know website is
optimized for mobile-->
<meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</head>
<body>
<div class = "card-panel">
<h3 class = "green-text">Icons</h3>
<div class = "container">
<div class = "row">
<div class = "col">
<i class="material-icons
tiny">account_circle</i>
</div>
<div class = "col">
<i class = "material-icons">
account_circle</i>
</div>
<div class = "col">
<i class="material-icons
small">account_circle</i>
</div>
<div class = "col">
<i class="material-icons
medium">account_circle</i>
</div>
<div class = "col">
<i class="material-icons
large">account_circle</i>
</div>
</div>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>输出如下：
