Google icons

To use Google material icons, add this cdn in html file inside head tag.

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

An additional CSS class will be declared called .material-icons. Any element that uses this class will have the correct CSS to render these icons from the web font.

Google material icons

Code
<!Doctype html>
<html>
<head>
   <title>Google material icons</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <style>
   i{font-size: 50px}
   </style>
</head>
<body>
   <h1 align="center">Google material icons</h1>

   <i class="material-icons">favorite</i>
   <i class="material-icons">explore</i>
   <i class="material-icons">emoji_emotions</i>
   <i class="material-icons">sports_cricket</i>

</body>
</html>

Icon example using its unicode.

Icon

Code
<i class="material-icons">&#xe87d;</i>

Note: Material icons are 24px by default.

Sizing icons

favorite favorite favorite favorite

Code
<!Doctype html>
<html>
<head>
   <title>Sizing google material icons</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <style>
   .material-icons.md-18 { font-size: 18px }
   .material-icons.md-24 { font-size: 24px }
   .material-icons.md-36 { font-size: 36px }
   .material-icons.md-48 { font-size: 48px }
   </style>
</head>
<body>
   <h1 align="center">Sizing google material icons</h1>

   <p>
	   <i class="material-icons md-18">favorite</i>
	   <i class="material-icons md-24">favorite</i>
	   <i class="material-icons md-36">favorite</i>
	   <i class="material-icons md-48">favorite</i>
	</p>

</body>
</html>

Coloring icons

favorite favorite favorite favorite

Code
<!Doctype html>
<html>
<head>
   <title>Coloring google material icons</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <style>
	.material-icons.md-18 { font-size: 18px }
	.material-icons.md-24 { font-size: 24px }
	.material-icons.md-36 { font-size: 36px }
	.material-icons.md-48 { font-size: 48px }
	/* coloring */
	.material-icons.red { color: red }
	.material-icons.blue { color: blue }
	.material-icons.green { color: green }
	.material-icons.orange { color: orange }
   </style>
</head>
<body>
   <h1 align="center">Coloring google material icons</h1>

   <p>
	   <i class="material-icons md-18 red">favorite</i>
	   <i class="material-icons md-24 blue">favorite</i>
	   <i class="material-icons md-36 green">favorite</i>
	   <i class="material-icons md-48 orange">favorite</i>
	</p>

</body>
</html>

More icons

×