使用图标
Google 的 Material Icons 提供了一长串图标。选择其中任何一个并将图标类的名称添加到 <body> 标记内的任何 HTML 元素。在下面的示例中，我们使用了属于操作类别的名为accessibility的图标。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
<body>
<i class = "material-icons">accessibility</i>
</body>
</html>
定义尺寸
您可以通过在 CSS 中定义图标的大小并将其与类名称一起使用来增加或减小图标的大小，如下所示。在下面的示例中，我们将大小声明为 6 em。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class = "material-icons mysize">accessibility</i>
</body>
</html>
定义颜色
您可以使用 CSS 来定义图标的颜色。以下示例显示了如何更改名为accessibility的图标的颜色。
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 6em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
