Icons Guide — Material Icons, Material Symbols, Font Awesome

1. Material Icons (Classic)

Ligature-based icons from Google. Good for dashboards, panels, and admin UIs.

Step 1: Load the font

Add to your app’s index.html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Step 2: Use in templates

Put the icon name as text content (not a class):

<span class="material-icons">add</span>
<span class="material-icons">close</span>
<span class="material-icons">check_circle</span>
<span class="material-icons spin">sync</span>

Loading spinner: add the spin class.
Examples: add, arrow_back, check, close, delete, error, info, security, sync, verified_user.
Find more: Material Icons.

2. Material Symbols (Rounded, Outlined, Sharp)

Variable fonts from Google with multiple styles. Prefer for new UI and modern look.

Step 1: Load the font

Add to your app’s global styles (e.g. styles.scss):

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');

Load only the variants you use.

Step 2: Use in templates

Choose one style class and use the icon name as text:

<span class="material-symbols-rounded">palette</span>
<span class="material-symbols-outlined">arrow_back</span>
<span class="material-symbols-sharp">close</span>

Filled variant (variable font):

<span class="material-symbols-rounded" style="font-variation-settings: 'FILL' 1;">star</span>

Sizing — use font-size:

.material-symbols-rounded { font-size: 1.25rem; }  /* 20px */

Find names: Material Symbols.

3. Font Awesome

Font-based icons via classes. Used in page builder Icon widgets and general UI.

Step 1: Load the font

Option A — CDN (add to index.html):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

Option B — Package:

yarn add @fortawesome/fontawesome-free

Then import in your styles:

@import '@fortawesome/fontawesome-free/css/all.min.css';

Step 2: Use in templates

Icon style + icon name (as classes):

<i class="fa fa-star"></i>
<i class="fas fa-check"></i>
<i class="far fa-heart"></i>
<i class="fab fa-github"></i>

Style prefixes: fas (solid), far (regular), fab (brands).
Find icons: Font Awesome Icons.

Quick picker

Troubleshooting

Icons show as text (e.g. "chat" instead of the icon)
→ The font is not loaded. Add the correct <link> or @import in that app.

Material Symbols not appearing
→ They use a different URL than Material Icons. Use the css2 import shown in section 2.

Be consistent
→ Use one system per feature or app where possible.