如何在使用 HTML 和 CSS 的网页中使用 Google Material icon 作为列表样式？

图标可以从图标库添加到我们的 HTML 页面。库中的所有图标都可以使用 CSS 进行格式化。它们可以根据大小、颜色、阴影等进行定制。它们在实现 CSS 中扮演着重要的角色。 Materialize CSS 提供了丰富的google材质图标集，可以从Material Design specs下载。

库和用法：要使用这些图标，在 HTML 代码的 部分添加以下行。

然后要使用图标，在 HTML 元素的 部分提供图标的名称。

add

要了解有关具体化 CSS 的更多信息，请参阅以下文章：

Materialize CSS Icons 在本文中，我们将学习如何将这些图标用作列表样式。

• 首先，我们将通过将list-style-type 设置为none来删除默认列表样式。

  HTML

• 然后我们将使用li:before样式在列表值之前添加内容并添加材质图标作为内容。

  HTML

此样式将向所有列表内容添加右箭头图标。

最终代码：

HTML

 
 

    
    
      
    
 
 
    
        
 
            GeeksForGeeks
        
 
    
      
    
    

        List with bullet style:
    
  
    

        
Geek 1
        
Geek 2
        
Geek 3
    
 
      
    
    

        List with icon as style:
    
  
    

        
Geek 1
        
Geek 2
        
Geek 3
    
 
 

输出：