Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

I'm currently developing an Angular 10 application that utilizes Angular Material Icons. I am in search of a method to dynamically showcase a dropdown menu containing all the available Material Icons.

My attempt to programmatically retrieve the icon list using MatIconRegistry has been unsuccessful so far, as the icons array remains empty. Here is 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 dependable method to fetch the list of Material Icons and exhibit them in a dropdown within Angular 10?

Any suggestions or alternative approaches would be greatly valued.

Thank you!

My goal is to achieve something similar to the following image: https://i.stack.imgur.com/932zY.png

Answer №1

If you find yourself overwhelmed by the sheer number of material icons available, fear not! There are over 900 of them, but Angular doesn't offer a way to access them programmatically. However, you can still check out this list of codes for reference.

It's worth noting that Google has recently shifted towards using a single font file for all their Material Symbols, combining over 2,500 glyphs into one convenient package.

If you only need a handful of specific icons, consider following the technique outlined by Kenedy on Stack Overflow for a more streamlined approach.

Answer №2

To showcase the material icon, you can follow these steps:

<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]
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Rails to render a partial containing a form object

I need help with rendering a partial called 'colordata' after selecting a color from a dropdown list using Ajax. Unfortunately, I'm not seeing any changes on the main page and the form is undefined in the colordata partial. This is the sche ...

The userscript will keep the window open as long as it remains inactive

Hello everyone, I'm excited to join the StackOverflow community and dive into userscripts for the first time! Putting aside any unnecessary details, I'm encountering a small issue with a script I recently created. (function () { $("#enbut"). ...

Achieving consistent scroll position when utilizing the history.js library to navigate back with the click of a button

I need help implementing a feature that allows users to return to the same position on a webpage when clicking the back button. A common example is on ecommerce sites where if you scroll down, click on a product, then go back, you should be taken back to t ...

Issue encountered while retrieving values from JSON for the data table

I recently developed an application using a combination of React and Flask to display JSON data in a table format. While I can successfully see the data loaded in the console, I encountered difficulties in rendering it within the data table. The technologi ...

Divide text to reduce its width within the confines of a specific height on a div element

I've spent the past week scouring various forums, including stackoverflow, but I haven't been able to find a solution. In my responsive website, I'm using CSS flexbox to display dynamic menu items. Sometimes the text can be quite long, and ...

Exploring intricate designs using HTML and Javascript

After extensive experience with both WPF and HTML5 JavaScript, one thing that stands out to me is the clear organization provided by XAML's defined panels. Grid, StackPanel, DockPanel, WrapPanel, and others offer a straightforward way to achieve consi ...

A function that retrieves the empty values from an array and returns undefined if there

After undergoing a time-consuming process, the sample below shows that the array values are returned empty. function myFunction() { let myArray = []; let pastArray = [1, 2, 6, 7, 8, 1, 9, 6, 0] pastArray.forEach(item =>{ setTimeout(function(){ myA ...

Expanding list item with jQuery

I am facing an issue with the dropdown functionality of my <li> elements. The problem occurs when clicking on the 4th option, as the expander appears on top instead of dropping down beneath the list item. If you check out this jsFiddle, you can see ...

Undefined is returned after resolving - React - JavaScript API

Learning React and JavaScript is a bit challenging for me, especially when it comes to understanding how Promises and resolving work. I'm currently working on an API to log into an application with an internal SQL database. The queries are functionin ...

What is the best way to gather user input and incorporate it into a selected template, ensuring it is verified before sending?

I'm in the process of developing a project that involves gathering user input through a collector and displaying it on my template for verification before sending it out. The format I'm aiming for can be seen here: This is the template format I ...

trouble with react-table's default height and flexible design

I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...

Retrieve the node-postgres result and store it in a separate object beyond the callback function

Currently, I am in the process of converting a data profiling script originally written in Python to JavaScript while following the Wes Bos beginner Javascript Course. This script is designed to take database connection details and a specified target tabl ...

error: local server did not return any data

I am currently using PHP on a Linux machine. In my HTML code, I have set up an AJAX request to the local Apache server (check http://localhost), with the intention of displaying the data from the server on the screen. However, for some reason, nothing is b ...

What could be causing the malfunction of the Facebook iframe like button?

Even though it functions offline, there seems to be an issue with its performance online. Here is the code that was used: <iframe src="http://www.facebook.com/plugins/like.php?app_id=125925834166578&amp;href=http%3A%2F%2Fwww.facebook.com%2FBaradei. ...

Issue with $_SERVER['PHP_SELF'] not functioning properly

Apologies if this question has been asked before, but after searching extensively I couldn't find a solution. Therefore, I am posting here... The issue is that I'm trying to submit values on the same page (using jQuery Mobile UI) and I have used ...

The issue with Express connect-flash only showing after a page refresh instead of instantly displaying on the same page needs to be addressed

Here is the registration route code snippet: router.post("/register", function(req, res){ var newUser = new User({username: req.body.username}); User.register(newUser, req.body.password, function(error, user){ if(error){ req.fl ...

Is it possible to alter the meaning of a word using the ngIf condition?

As a newcomer to Angular and Ionic, I am experimenting with retrieving JSON data from a URL and translating the words received to another language. My initial attempt using ngif did not yield the desired result! This is what I tried to do in order to chan ...

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

Replace the facebook plugin using JQuery libraries

Does anyone know how to remove the like button on top of the 'Like box' Facebook plugin using JQuery? I have imported the like box from Facebook and I want to eliminate this like button, but Facebook does not allow me to do so. Therefore, I am t ...

Trigger javascript function with a button click

Is there a way to trigger a JavaScript function from an HTML button that is not functioning properly? REVISED To see the issue in action, please visit this jsfiddle link: http://jsfiddle.net/winresh24/Sq7hg/341/ <button onclick="myFunction()">Try i ...