Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
      ul{
          list-style-type: none;
      }
    </style>

    chevron_right

    
    

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

    HTML

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
      li:before{
        content: 'arrow_right';
        font-family: 'Material Icons';
      }
    </style>

    chevron_right

    
    

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

Final Code:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :