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.
Tiny
Small
Medium
Large
Symbol Sizes
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>