Google提供了一组根据“材料设计准则”设计的750个图标，这些图标被称为“材料设计”图标。这些图标很简单，并且支持所有现代Web浏览器。由于这些图标是基于矢量的，因此它们也是可伸缩的。要使用这些图标，我们必须加载字体（库） material-icons 。

加载字体（库）

要加载材料图标库，请将以下行复制并粘贴到网页的部分中。

使用图标

Google的Material Icons提供了很长的图标列表。选择其中之一，然后将图标类的名称添加到标记内的任何HTML元素中。在以下示例中，我们使用了属于操作类别的名为accessibility的图标。

   
    
   
      accessibility
   
    

它将产生以下输出-

定义大小

您可以通过在CSS中定义图标的大小并将其与类名一起使用来增加或减小图标的大小，如下所示。在下面的示例中，我们将大小声明为6 em。

        
      
        
   
    
   
      accessibility
   
    

它将产生以下输出-

定义颜色

您可以使用CSS定义图标的颜色。以下示例显示了如何更改名为accessibility的图标的颜色。

        
      
        
   
    
   
      accessibility
   
    

它将产生以下输出-

分类列表

Google的Material Icons字体在以下类别中提供了519个图标-

• 动作图标
• 警报图标
• AV图标
• 通信图标
• 内容图标
• 设备图标
• 编辑器图标
• 文件图标
• 硬件图标
• 图像图标
• 地图图标
• 导航图标
• 通知图标
• 社会图标
• 切换图标

要使用这些图标中的任何一个，必须用所需图标的类名替换本章给出的程序中的类名。在本单元（材料图标）的后续章节中，我们已按类别说明了各种材料图标的用法和各自的输出。