Materialize CSS | Icons

Materialized CSS icons include material design icons that are provided by Google. These icons can be downloaded directly from the material design specs.

Materialize Icon Libraries :

There are following types of icon libraries in Materialize CSS.

  1. Font Awesome Icons
  2. Google Material Icons
  3. Bootstrap Icons

How To Use Icons- To use material icon inside the project, add the below given CDN link inside <head> section of the web page.

CDN Link
   <link href="" rel="stylesheet">  

To use these icons, use the .material-icons class on an element.

   <i class="material-icons">camera</i>  

How To Control The Size Of Icons

The materialized CSS provides a different predefined class that is used to create different sizes of icons. These icons classes are:.tiny, .small, .medium & .large

General Syntax

      <i class="fa fa-cloud tiny"></i>
<i class="material-icons tiny">cloud</i>
<i class="glyphicon glyphicon-cloud tiny"></i>
Try it now

Source Code

          <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>
Try it now

Source Code: Output

Web Tutorials

Materialize CSS | Icons
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4