Documentation

Usage

				import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgHeroiconsModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you are using the last version >= 1.18.1, and you are setting the default config, you should do it in the app.config file like the following example.

				import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';

import { NgHeroiconsModule } from '@dimaslz/ng-heroicons';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    // 👇
    importProvidersFrom(
      NgHeroiconsModule.forRoot({ default: 'solid' }) // 👈
    )
    // 👆
  ],
};

Working with lastest versions (>= 1.18.1)

By default the icons will be in outline type, but it will only affect to the ng-heroicons component.

				<!-- example by components -->
<div>
  <!-- using style -->
  <academic-cap-outline-icon style="color: red;" />

  <!-- using css classes (class for color will affect to svg) -->
  <academic-cap-outline-icon class="text-red-400" />

  <!-- pass color or size -->
  <academic-cap-outline-icon size="48" color="red" />

  <!-- To apply specific style to the SVG, use `svgStyle` -->
  <academic-cap-outline-icon svgStyle="color: red;" />

  <!-- To apply specific css to the SVG, use `svgClass` -->
  <academic-cap-outline-icon svgClass="your-class-for-the-svg" />
</div>

<!-- example by <ng-heroicons ... /> component -->
<div>
  <!-- force to render outline icon -->
  <ng-heroicons icon="academic-cap" outline />

  <!-- force to render solid icon -->
  <ng-heroicons icon="academic-cap" solid />

  <!-- using style -->
  <ng-heroicons icon="academic-cap" style="color: red;" />

  <!-- using css classes (class for color will affect to svg) -->
  <ng-heroicons icon="academic-cap" class="text-red-400" />

  <!-- pass color or size -->
  <ng-heroicons icon="academic-cap" size="48" color="red" />
</div>

Working with legacy versions (< 1.18.0)

				<!-- example by components -->
<div>
  <academic-cap-outline-icon style="color: red;"></academic-cap-outline-icon>

  <!-- using css classes (class for color will affect to svg) -->
  <academic-cap-outline-icon class="text-red-400"></academic-cap-outline-icon>

  <!-- pass color or size -->
  <academic-cap-outline-icon size="48" color="red"></academic-cap-outline-icon>

  <!-- To apply specific style to the SVG, use `svgStyle` -->
  <academic-cap-outline-icon svgStyle="color: red;"></academic-cap-outline-icon>

  <!-- To apply specific css to the SVG, use `svgClass` -->
  <academic-cap-outline-icon svgClass="your-class-for-the-svg"></academic-cap-outline-icon>
</div>

developed with ♥ by dimaslz (fork in Github)