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.


    npm install @igniteui/material-icons-extended


    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.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 = [,
      addIcons() {
        for (let icon of this.allIcons) {
          this.iconService.addSvgIconFromText(, icon.value, 'imx-icons');
      ngOnInit(): void {

    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


    Our community is active and always welcoming to new ideas.