GitHub - adhispace/angular-ionicons

This is a wrapper library to use ionicons in angular applications.

How to use

1. Install the npm package

npm install angular-ionicons

2. Import the module to app.module.ts

import { AngularIoniconsModule } from 'angular-ionicons';

3. Import and setup needed icons

For icon names, please refer to ionicons. For instance if you need accessibility-outline icon, you have to import it as below.

    import { IonAccessibilityOutline } from 'angular-ionicons';

Then setup the icons as below.

import { IonAccessibilityOutline, IonAirplane } from 'angular-ionicons';

const icons = {
  IonAccessibilityOutline,
  IonAirplane
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularIoniconsModule.setup(icons)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Use it in your template

Now use the icons as below

<ng-ionicon name="accessibility-outline"></ng-ionicon>

5. Style your icons

You can apply style to your icons similar to normal HTML elements.

<ng-ionicon style="color: yellow" name="accessibility-outline"></ng-ionicon>