Icons

We use Google Material Icons by Google. They provide a searchable list (which we do not include in the documentation here), which will also show you the relevant icon names for the CSS classes. You can download the icons directly from the Material Design specs.

In addition to Material Icons, we also provide support to every variation of Material Symbols set (outlined, rounded and sharp).

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.

Symbol Sizes

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