Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
      
    <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>

                    

Output:



Last Updated : 18 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads