Material Icons Extended

    The Ignite UI Material Icons Extended is a subset of icons that extends the material icon set by Google.

    Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free.

    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 { IgxIconService } from '@infragistics/igniteui-angular'; for licensed package
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,
  ];
  //...
  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 family="imx-icons" name="github"></igx-icon>

    For more information and other types of usage, go to our GitHub Repository.

    Additional Resources

    IgxIconService

    Our community is active and always welcoming to new ideas.