12345678910111213141516171819202122232425262728293031import React, { ReactElement } from "react";
import * as MaterialIcons from "@react-md/material-icons";
import { Tooltipped } from "@react-md/tooltip";

import styles from "./AllIcons.module.scss";

const allIcons = Object.entries(MaterialIcons).filter(([name]) =>
  name.endsWith("SVGIcon")
);

export default function Demo(): ReactElement {
  return (
    <div className={styles.container}>
      {allIcons.map(([name, Icon]) => (
        <div key={name} className={styles.icon}>
          <Icon />
          <Tooltipped id={`icon-${name}`} tooltip={name}>
            {({ tooltip, ...a11y }) => (
              <>
                <code {...a11y} className={styles.name} tabIndex={0}>
                  {name.replace(/SVGIcon/, "")}
                </code>
                {tooltip}
              </>
            )}
          </Tooltipped>
        </div>
      ))}
    </div>
  );
}