Ngx-icon

An Angular component for displaying SVG icons.

Features

• display any SVG icon
• add custom CSS to the SVG icons
• automatic caching of previously added icons

Dependencies

| ngx-icon | Angular | | -------- | ------- | | current | >= 16 |

Installation

npm install @anedomansky/ngx-icon

Setup

You have to add all your icons to the NgxIconService in order to display them. Please remove all height and width attributes from the <svg> element beforehand. Furthermore, you have to provide the HttpClient in your application.

main.ts:

import { NgxIconService } from "@anedomansky/ngx-icon";
import { provideHttpClient } from "@angular/common/http";
import { APP_INITIALIZER } from "@angular/core";
import { bootstrapApplication } from "@angular/platform-browser";

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

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    {
      provide: APP_INITIALIZER,
      useFactory: (iconService: NgxIconService) => () => {
        iconService.addIcon("cart", "assets/");
        iconService.addIcon("camera", "assets/");
      },
      deps: [NgxIconService],
      multi: true,
    },
  ],
});

Usage

app.component.html:

<div class="app">
  <ngx-icon name="cart"></ngx-icon>
  <ngx-icon name="camera"></ngx-icon>
</div>

app.component.ts:

import { NgxIconComponent } from "@anedomansky/ngx-icon";
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  standalone: true,
  imports: [NgxIconComponent],
})
export class AppComponent {}

Customization

You can alter the appearance (height, width, etc.) of the icons.

Additionally, there is a CSS Custom Property for the icon's height that can easily be updated.

app.component.scss:

.app ::ng-deep ngx-icon {
  --ngx-icon-size: 2rem;
}