Icons
Materialize is a modern responsive CSS framework based on Material Design by Google.
Usage
To be able to use these icons, you must include one of the
following lines in the
<head>
portion of your
HTML code
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- Material Symbols - Outlined Set -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<!-- Material Symbols - Rounded Set -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
<!-- Material Symbols - Sharp Set -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
To use these icons, use either the material-icons class or the corresponding material-symbols set class on an element and provide the ligature as the text content.
<i class="material-icons">add</i>
<!-- Use one of the following if opted by material symbols -->
<i class="material-symbols-outlined">add</i>
<i class="material-symbols-rounded">add</i>
<i class="material-symbols-sharp">add</i>
Icon Sizes
To control the size of the icon, change the
font-size: 30px
property of
your icon. Optionally you can use preset classes as shown below.
insert_chart
insert_chart
insert_chart
insert_chart
Tiny
Small
Medium
Large
Symbol Sizes
settings
settings
settings
settings
Tiny
Small
Medium
Large
<!--
Sizes:
tiny: 1rem
small: 2rem
medium: 4rem
large: 6rem
-->
<!-- Material Icons -->
<i class="large material-icons">insert_chart</i>
<!-- Material Symbols -->
<i class="large material-symbols-outlined">insert_chart</i>
<i class="large material-symbols-rounded">insert_chart</i>
<i class="large material-symbols-sharp">insert_chart</i>