Material Icons Extended

    The Ignite UI for Angular provides a nice set of icons that extends the material icon set

    Installation

    npm install @igniteui/material-icons-extended

    Usage

    First, let's see how we can register a single icon in our component:

    import { Component, OnInit } from "@angular/core";
import { IgxIconService } from "igniteui-angular";
import { github } from "@igniteui/material-icons-extended";
// ...
export class SampleComponent implements OnInit {
  constructor(private iconService: IgxIconService) {}

  ngOnInit(): void {
    // Register a single icon
    this.iconService.addSvgIconFromText(github.name, github.value, "imx-icons");
  }
}

    Now, let's see how to register multiple icons/categories:

    //...
import { health, programming } from "@igniteui/material-icons-extended";

export class SampleComponent implements OnInit {
  public allIcons = [
    ...health,
    ...programming,
    ...finance,
    ...logos,
    ...socialMedia
  ];
  //...
  addIcons() {
    for (let icon of this.allIcons) {
      this.iconService.addSvgIconFromText(icon.name, icon.value, "imx-icons");
    }
  }

  ngOnInit(): void {
    this.addIcons();
  }
}

    To use the icons in your component template:

    <igx-icon fontSet="imx-icons" name="github"></igx-icon>

    For more info and other types of usages, goo to our * GitHub repo.

    Additional Resources

    IgxIconService

    Our community is active and always welcoming to new ideas.