Core

Icons

BuilderKit includes a built-in icon setup to ensure full compatibility with Angular Material’s MatIcon component. This allows you to display custom icons without breaking layout or visual consistency in components that rely on Angular Material’s styling.

Official docs

Angular Material components rely heavily on the mat-icon component for layout and spacing. You cannot replace mat-icon with another component or wrap a custom icon inside it without breaking the intended design. To ensure everything works as expected, you must use mat-icon directly.

BuilderKit solves this by registering a full SVG icon set with Angular Material’s MatIconRegistry, enabling the use of mat-icon with any icon library that supports SVG sprite sheets or fonts.

Provider Setup

To use the icons system, add the provideIcons function to your application configuration:

import { provideIcons } from '@/app/core/icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideIcons(),
    // ...other providers
  ],
};

This provider automatically registers the default Lucide icon set with Angular Material's MatIconRegistry, making all icons available throughout your application.

Default Icon Set

By default, BuilderKit includes Lucide Icons, a clean and consistent open-source icon set.

Instead of registering each icon individually, BuilderKit registers the entire Lucide icon set as an embedded SVG string. This approach ensures all icons are immediately available without requiring external asset files or network requests, while preserving full compatibility with mat-icon.

The icon set is registered like this:

const domSanitizer = inject(DomSanitizer);
const matIconRegistry = inject(MatIconRegistry);

// Lucide icons (embedded as a string literal)
matIconRegistry.addSvgIconSetLiteral(
  domSanitizer.bypassSecurityTrustHtml(lucideIcons),
  { viewBox: '0 0 24 24' }
);

The icons are embedded directly in the code, so there's no need to manage separate asset files. Icons can be used like this:

<mat-icon svgIcon="arrow-right"></mat-icon>

Custom Icon Sets

You are not limited to Lucide. You can register additional sets or switch to a different icon collection entirely:

matIconRegistry.addSvgIconSetInNamespace('custom',
  domSanitizer.bypassSecurityTrustResourceUrl('icons/custom-icons.svg')
);

Use them with the mat-icon element:

<mat-icon svgIcon="custom:your-icon-name"></mat-icon>