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.
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>
<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>
<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>
<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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
18 Jan, 2021
Like Article
Save Article