Materialize CSS Icons

Materialize CSS contains 932 material design icons from Google. These icons can be downloaded directly from the Material Design specs.

There are three types of icon libraries supported by Materialize CSS:

Font Awesome Icons
Google Material Icons
Bootstrap Icons

How to use Materialize CSS Icons

You have to put the name of the icon in the class of an HTML <i> element to use the icon.

You can use the following classes to control the size of an icon.

Index	Class name	Description
1)	tiny	It is used to draw an icon of very small size. 1rem.
2)	small	It is used to draw an icon of small size. 2rem.
3)	medium	It is used to draw an icon of medium size. 4rem.
4)	large	It is used to draw an icon of large size. 6rem.

Example

Let's take an example to demonstrate the icons used in Materialize CSS:

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "container">
      
      <h3>Font Awesome Icons</h3>
      <i class = "fa fa-cloud tiny"></i>
      <i class = "fa fa-cloud"></i>	  
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud medium"></i>
      <i class = "fa fa-cloud large"></i>     
      
      <h3>Google Material Design Icons</h3>	  
      <i class = "material-icons tiny">cloud</i>
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons medium">cloud</i>
      <i class = "material-icons large">cloud</i>      
      
      <h3>Bootstrap Icons</h3>
      <i class = "glyphicon glyphicon-cloud tiny"></i>
      <i class = "glyphicon glyphicon-cloud"></i>      
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud medium"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>      
   </body>  
</html>

Test it Now

Output: