Dynamically obtain list of all material icons

Question

I am trying to display a list of all possible material icons so the user can select one to use on their website. My code needs to display all the material icons there are. I'm unsure how my code should correctly find the 'icon list'.

One way I could achieve this is to store an array of all possible values in a javascript file. So I would have an array like so: [..., 'restore', 'restore_from', ...]. But that means I need to create an array 900 long and manually update it every time google releases more icons.

Another way is to iterate the hex codes, so I simply iterate values from DFD4 to E358. This works (see code below) but some values are blank (see below image). So it's not a full-proof solution.

Do you know how I can list all material icons without having to manually build and maintain a list of icons?

Hex iteration technique:

var values = Array.from({length: 58200-57300},(v,k)=>57300+k);
$.each(values, function(i, iconId) {
    iconId = '&#x' + iconId.toString(16) + ';';
    var icon = $('<i class="material-icons" aria-hidden="true">'+ iconId +'</i>');
});

You could use hex literals: `Array.from({ length: 0xE358 - 0xDFD4 }, (v, k) => 0xDFD4 + k)` to make it easier... — Mr. Polywhirl, Feb 14 '20 at 04:24
My first instinct would be to include the npm package as a dependency and read/parse/scrape the file. — Sydney Y, Feb 14 '20 at 04:28
No NPM, just vanilla JS, JQuery, JQuery UI. The resultant code is a JQuery Plugin — sazr, Feb 14 '20 at 04:30

score 0 · Answer 1 · answered Jan 13 '23 at 16:37

One approach to generate the list with code is taking advantage of the list that the Material UI project maintains. Importing like this is not the most performant solution though, but you could run this out of your app and only save the resulting list.

import snakeCase from "lodash/snakeCase";
import * as Icons from "@mui/icons-material";

const iconStyles = ["Filled", "Outlined", "Rounded", "TwoTone", "Sharp"];
const keys = Object.entries(Icons)
  .filter(
    ([key, value], i) =>
      iconStyles.filter((style) => key.endsWith(style)).length === 0
  )
  .map(([key]) => snakeCase(key));
console.log(JSON.stringify(keys));

Dynamically obtain list of all material icons

1 Answers1