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

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.HTMLHTML<style>  ul{      list-style-type: none;  }</style>
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.HTMLHTML<style>  li:before{    content: 'arrow_right';    font-family: 'Material Icons';  }</style>
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>
Output:
CSS-Misc
HTML-Misc
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS