Question 300199 in Html Question posted in
Some basic documentation can be found here.

Html – Displaying a Dropdown List of All Angular Material Icons in Angular 2+ / 10

I’m working on an Angular 10 application and using Angular Material Icons. I’m looking for a way to dynamically display a dropdown list containing all the available Material Icons.

I’ve attempted to retrieve the list programmatically using MatIconRegistry, but so far, the icons array remains empty. Here’s the relevant code snippet:

    this.matIconRegistry['_iconSetConfigs'].forEach((config: any) => {
        if (config.names) {
            config.names.forEach((name: string) => {
                const sanitizedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(config.url);
                ics.push(name);
            });
        }
    });

Is there a reliable approach to fetch the list of Material Icons and display them in a dropdown in Angular 10?

Any insights or alternative solutions would be highly appreciated.

Thank you!

Trying to build something like this:
enter image description here

Tags:

2

Answers


  1. 0

    if you want to display the icon from the material, you can do it like this

    <div *ngFor="let icon of icons;">
<mat-icon aria-hidden="false" aria-label="Example home icon" [fontIcon]="icon"></mat-icon>
</div>

    icons = ['home']

    import {MatIconModule} from '@angular/material/icon';

@NgModule({
  imports: [MatIconModule]
})
    Login or Signup to reply.
  2. 0

    You may not want to display all the material icons in a dropdown as there are more than 900. Angular doesn’t provide an API to get the list programmatically but here are the codes for them.

    Note that lately they went for the font route:

    Material Symbols are our newest icons, consolidating over 2,500 glyphs
    in a single font.

    Ideally you would have a list of the desired icons and use the approach suggested by Kenedy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search