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.

Font Awesome Icons
Google Material Icons
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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

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

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

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4