WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Google Icons Introduction


Basic Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

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

Note: No downloading or installation is required!

Add the material-icons class to an inline element and insert the icon's name:

Example

The following code:

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

<i class="material-icons">Home</i>
<i class="material-icons" style="font-size:48px;">school</i>
<i class="material-icons" style="font-size:60px;color:red;">computer</i>

</body>
</html>

Results in:

Home school

Google icons are designed to be used with inline elements. The <i> and <span> elements are widely used for icons.


Sizable Icons

Although the material icons can be scaled to any size, the recommended font-size is either 18, 24, 36 or 48px:

Example

The following code:

<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } /* Default */
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
</style>

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

Results in:

school school school school