How to use Google material icon as list-style in a webpage using HTML and CSS ?

Last Updated : 18 Jan, 2021

Icons can be added to our HTML page from the icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, colour, shadow, etc. They play a considerate part in materialize CSS. Materialize CSS provides a rich set of material icons of google which can be downloaded from Material Design specs.

Library and Usage: To use these icons, the following line is added in the <head> part of the HTML code.

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Then to use the icons, the name of the icon is provided in the <i> part of HTML element.

<i class="material-icons">add</i>

To learn more about materialize CSS follow the article below:

Materialize CSS Icons In this article, we will learn how to use these icons as a list-style.

Firstly, we will remove the default list style by setting list-style-type to none.
HTML
<style>

  ul{

      list-style-type: none;

  }

</style>

Then we will use the li:before style to add content before the list value and add material icons as content.
HTML
<style>

  li:before{

    content: 'arrow_right';

    font-family: 'Material Icons';

  }

</style>

This style will add the right arrow icon to all the list contents.

Final Code:

HTML

<!DOCTYPE>  
<html>  
<head> 
    <!-- Google Material Icon Script -->
    <link 
        rel="stylesheet" href= 
"https://fonts.googleapis.com/icon?family=Material+Icons"> 
      
    <style> 
        /* Removing the list style of list gfg */ 
        .gfg{ 
            list-style-type:none; 
        } 
          
        /* Adding icon before each list icon */ 
        .gfg > li:before{ 
            content: 'arrow_right'; 
            font-family: 'Material Icons'; 
            font-size: 25px; 
            vertical-align: -30%; 
        } 
    </style> 
</head>  
<body>  
    <center> 
        <h1 style="color:forestgreen;">  
            GeeksForGeeks 
        </h1>  
    </center> 
      
    <!-- This is a list with bullet style -->
    <h3 style="color:crimson;"> 
        List with bullet style: 
    </h3> 
  
    <ul style="color:dodgerblue;"> 
        <li>Geek 1</li> 
        <li>Geek 2</li> 
        <li>Geek 3</li> 
    </ul>  
      
    <!-- This is the list with icon as its style -->
    <h3 style="color:crimson;"> 
        List with icon as style: 
    </h3> 
  
    <ul class="gfg" style="color:dodgerblue;"> 
        <li>Geek 1</li> 
        <li>Geek 2</li> 
        <li>Geek 3</li> 
    </ul>  
</body>  
</html>