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:

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

<i class=”material-icons”>cloud</i>
<i class=”material-icons” style=”font-size:48px;”>cloud</i>
<i class=”material-icons” style=”font-size:60px; color:red;”>cloud</i>

</body>
</html>

cloud cloud cloud

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

Note: Material icons are 24px by default

Also note that if you change the color of the icon’s container, the color of the icon changes too. Same things goes for shadow, and anything else that gets inherited using CSS. The explaintaion is the CSS font-size property, which iss always 24px, unless something else is specifies.

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

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

<i class=”material-icons md-18″>cloud</i>
<i class=”material-icons md-24″>cloud</i>
<i class=”material-icons md-36″>cloud</i>
<i class=”material-icons md-48″>cloud</i>

cloud cloud cloud cloud