Icons

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

Angular Material components place icons by matching the mat-icon element, for example in buttons and menu items, and BuilderKit’s styles for these components size and space mat-icon as well. Use mat-icon directly rather than another icon component.

BuilderKit registers the full Lucide SVG icon set with Angular Material’s MatIconRegistry, so every Lucide icon can be used with mat-icon by name. The registry accepts other SVG icon sets as well, and mat-icon itself also supports icon fonts through its fontSet and fontIcon inputs.

Provider Setup

Add provideIcons to the providers array of your application configuration:

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

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

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. In return, the set is part of your application’s JavaScript bundle.

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' }
);

Icon names match the Lucide icon names, in kebab-case as listed on lucide.dev. Icons can be used like this:

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

Sizing and coloring icons is covered on the Icon component page.

Custom Icon Sets

You are not limited to Lucide. The icons provider is part of your application at src/app/core/icons/provider.ts, so additional sets are registered right there, after the Lucide registration, each in its own namespace:

export const provideIcons = (): EnvironmentProviders =>
  makeEnvironmentProviders([
    provideAppInitializer(() => {
      const domSanitizer = inject(DomSanitizer);
      const matIconRegistry = inject(MatIconRegistry);

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

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

A set registered by URL is fetched the first time an icon from its namespace is displayed.

To register a single SVG file, use addSvgIconInNamespace with the icon name and its URL. To embed a set in the bundle the way Lucide is, without a request, use addSvgIconSetLiteralInNamespace with bypassSecurityTrustHtml.

Use them with the mat-icon element:

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

Icon Styles

Lucide icons are outlines, and the styles that draw them that way live in src/styles/third-party/lucide-icons.css:

#bui {
  mat-icon:not([data-mat-icon-namespace]) svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

These styles apply to icons without a namespace, which is where Lucide is registered. Sets registered in a namespace are left as they are drawn, so filled sets work without extra CSS. To style a namespaced set, target its data-mat-icon-namespace attribute, for example to give a stroke-based set its outline:

#bui {
  mat-icon[data-mat-icon-namespace='custom'] svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }
}

The file is yours: change it, add your own CSS next to it, or replace it.

Replacing Lucide

Lucide is registered without a namespace, which is where unprefixed names such as arrow-right are looked up. To use a different default set, replace the Lucide registration in the icons provider with your own set registered without a namespace, and remove lucide.ts along with its import. The new set has to provide every icon name in use, including the ones in BuilderKit components, such as pipette in the color picker, and in blocks and templates. Without a namespace, the Lucide styles apply to it as well. Adjust or replace lucide-icons.css if it is drawn differently.