120
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:
Output:
Next TopicMaterialize CSS Navbar