menu

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.

Usage

To be able to use these icons, you must include this line in the <head>portion of your HTML code


  <!-- This is the default icon set and is also the same with filled icon set -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Other variants -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

  <!-- Please note that when using two-tone icons, this will not follow the preferred color scheme e.g. Dark Mode -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">

For Material Symbols, you can use the following links:


  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

To use these icons, use the material-icons class on an element and provide the ligature as the text content. 


  <!-- Default/Filled -->
  <i class="material-icons">add</i>
  
  <!-- Other Variants (Requires other font family) -->
  <i class="material-icons-outlined">add</i>
  <i class="material-icons-round">add</i>
  <i class="material-icons-sharp">add</i>
  <i class="material-icons-two-tone">add</i>

  <!-- Material Symbols (Requires other font family) -->
  <i class="material-symbols-sharp">add</i>
  <i class="material-symbols-rounded">add</i>
  <i class="material-symbols-outlined">add</i>

FontAwesome

If you prefer FontAwesome,just link the FontAwesome library and you're good to go. You can check this link (FontAwesome Web Setup ) to add the library to your project.

Here are sample snippets for the usage of FontAwesome.


  <i class="fa-solid fa-user"></i>
  <i class="fa-regular fa-user"></i>
  <i class="fa-light fa-user"></i>
  <i class="fa-duotone fa-user"></i>
  <i class="fa-thin fa-user"></i>
  <i class="fa-sharp fa-solid fa-user"></i>
  <i class="fa-brands fa-google"></i>

Please note that you can also use FontAwesome icons on any components here that uses Material Icons.

Emojis

If you don't want to use any icon library, you can try using emojis.

Here are sample snippets for emojis.


  <i class="icon">⚠️</i>
  <i class="icon tiny">😊</i>
  <i class="icon large">💖</i>

Please note that you can also use Emojis on any components here that uses Material Icons.

You can also use other icon library with icon class.

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

Tiny

insert_chart

Small

insert_chart

Medium

insert_chart

Large

favorite

s18

favorite

s24

favorite

s36

favorite

s48


  <!--
  Sizes:
  tiny: 1rem
  small: 2rem
  medium: 4rem
  large: 6rem

  s18: 18px
  s24: 24px - default
  s36: 36px
  s48: 48px
  -->
  <i class="large material-icons">insert_chart</i>
  <i class="tiny fa-solid fa-house"></i>
  <i class="medium icon">😘</i>

Icons Listing

For the list of available Material Icons, click here.

For FontAwesome icons, click here.