简述
本章介绍了 Google 的（材料）导航图标的用法。假设custom是我们定义大小和颜色的 CSS 类名，如下例所示。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
下表包含 Google 的（材料）导航图标的使用和结果。用表中给出的代码替换上述程序的 < body > 标签以获得相应的输出 -
| Usage |
Result |
| <i class="material-icons custom">apps</i> |
apps |
| <i class="material-icons custom">arrow_back</i> |
arrow_back |
| <i class="material-icons custom">arrow_drop_down</i> |
arrow_drop_down |
| <i class="material-icons custom">arrow_drop_down_circle</i> |
arrow_drop_down_circle |
| <i class="material-icons custom">arrow_drop_up</i> |
arrow_drop_up |
| <i class="material-icons custom">arrow_forward</i> |
arrow_forward |
| <i class="material-icons custom">cancel</i> |
cancel |
| <i class="material-icons custom">check</i> |
check |
| <i class="material-icons custom">chevron_left</i> |
chevron_left |
| <i class="material-icons custom">chevron_right</i> |
chevron_right |
| <i class="material-icons custom">close</i> |
close |
| <i class="material-icons custom">expand_less</i> |
expand_less |
| <i class="material-icons custom">expand_more</i> |
expand_more |
| <i class="material-icons custom">fullscreen</i> |
fullscreen |
| <i class="material-icons custom">fullscreen_exit</i> |
fullscreen_exit |
| <i class="material-icons custom">menu</i> |
menu |
| <i class="material-icons custom">more_horiz</i> |
more_horiz |
| <i class="material-icons custom">more_vert</i> |
more_vert |
| <i class="material-icons custom">refresh</i> |
refresh |
