Использует CSS-шрифт @koobiq/icons. Провайдеры не требуются — достаточно подключить стили.

Установите зависимость и настройте 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 {}

Список доступных иконок: Иконки

---

Подходит, если у вас готовый SVG-спрайт и все иконки нужно загрузить одним HTTP-запросом.

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 {}

Подходит, если иконки расположены по предсказуемым URL и должны загружаться по требованию (без спрайта).

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

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

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

---

Часть SVG-иконок (например, folder-dot_16, envelope-dot_24) содержит дополнительный акцентный элемент, цвет которого можно задать отдельно от основного цвета иконки. Акцентный цвет управляется CSS-переменной --icon-accent-color и по умолчанию равен currentColor.

.my-scope {
    --icon-accent-color: var(--kbq-foreground-error);
}

Переменная применяется только к SVG-иконкам — шрифтовые иконки всегда одноцветные.

Полный список двухцветных иконок доступен на странице Иконки с включённым фильтром «Только двухцветные».