Components

Icon

Angular Material Icon renders registered vector-based icons and supports icon fonts or SVGs only. BuilderKit registers the full Lucide set, so Angular Material icons are available everywhere without any per icon setup, and every mat-icon takes its size and its color from the utility classes you put on it.

Official docs API reference

Icons are used inside other components as well, for example leading or trailing the label of a button, where the spacing is handled for you.

Example

Below is an example of how BuilderKit restyles the Angular Material Icon and gives it a more modern appearance.

Overview

With Tailwind CSS utility classes

<mat-icon svgIcon="circle-check" />

<mat-icon class="size-8 text-red" svgIcon="search" />

Icon sizes

An icon fills the box it is given, so a size utility is all it takes to go from a small glyph next to a label to a large one heading a section.

<mat-icon class="size-4" svgIcon="award" />
<mat-icon class="size-6" svgIcon="award" />
<mat-icon class="size-12" svgIcon="award" />

Icon colors

The icon is drawn in the current text color, so it picks up whatever the surrounding text uses and can be tinted on its own for a success, a warning or a danger state.

<mat-icon class="size-6 text-jade" svgIcon="circle-check" />
<mat-icon class="size-6 text-amber" svgIcon="triangle-alert" />
<mat-icon class="size-6 text-red" svgIcon="circle-x" />