Uses @koobiq/icons CSS font. No providers needed — works out of the box after adding the stylesheet.

Install the dependency and configure angular.json:

npm install @koobiq/icons

"styles": [
  "node_modules/@koobiq/icons/fonts/kbq-icons.css"
]

import { KbqIconModule } from '@koobiq/components/icon';

@Component({
    imports: [KbqIconModule],
    template: `
        <i kbq-icon="kbq-plus_16"></i>
    `
})
export class AppComponent {}

Available icons: Icons

SVG icons render inline and support CSS color theming via currentColor. Choose one of the approaches below depending on your needs.

Best when you have a pre-built SVG sprite and want all icons in a single HTTP request.

import { provideHttpClient } from '@angular/common/http';
import { kbqIconsProvider } from '@koobiq/components/icon';

bootstrapApplication(AppComponent, {
    providers: [
        kbqIconsProvider(
            { spriteUrl: '/assets/icons/sprite.symbol.svg' },
            { spriteUrl: '/assets/brand/sprite.symbol.svg', namespace: 'brand' }
        )
    ]
});

@Component({
    imports: [KbqIconModule],
    template: `
        <i kbq-icon="plus_16"></i>
        <i kbq-icon="brand:logo_24"></i>
    `
})
export class AppComponent {}

Best when icons live at predictable URLs and you want them fetched on demand (no sprite required).

import { provideHttpClient } from '@angular/common/http';
import { kbqIconsResolverProvider } from '@koobiq/components/icon';

bootstrapApplication(AppComponent, {
    providers: [
        provideHttpClient(),
        kbqIconsResolverProvider((name) => `/assets/icons/${name}.svg`)
    ]
});

@Component({
    imports: [KbqIconModule],
    template: `
        <i kbq-icon="plus_16"></i>
    `
})
export class AppComponent {}