Overview

Tailbreeze uses Material Symbols as the default icons library for all of it’s font-icon requirements.

Material Symbols icons consolidating over 2,803 glyphs in a single font file with a wide range of design variants. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size).

Overview

Basic usage

Use a consistent <i> tag to reference the icons in your code. Start browsing the icons page to find and copy the classname of icons.

<i class="icon">[icon-name]</i>

Example:

<i class="icon">add</i>

Styling

These are font-based icons, meaning you can style with CSS just like how you style a HTML element.

HTML

<i class="icon icon-custom">search</i>

CSS

.icon-custom {
    color: #1182ee;
    font-size: 3rem;
}