react material-ui svg icon list

example-svgiconlist.tsx

import React = require('react');
import * as svgIcons from 'material-ui/svg-icons';

function parseCategory(iconName: string) {
  let cat: string[] = [iconName.charAt(0)];
  for (let i = 1; i < iconName.length; i++) {
    let c = iconName.charAt(i);
    if (c == c.toUpperCase()) {
      break;
    }
    cat.push(c);
  }
  return cat.join('');
}

let iconBlockStyle: React.CSSProperties = {
  display: 'inline-block',
  width: 40,
  height: 40
}

let childrenNodes: React.ReactNode[] = [];
let count = 0;
let lastCategory: string
for (let iconName in svgIcons) {
  let cat = parseCategory(iconName);
  if(cat!=lastCategory){
    childrenNodes.push(<h2>{cat}</h2>);
    lastCategory = cat;
  }
  let Icon: any = (svgIcons as any)[iconName];//force cast
  childrenNodes.push(<div style={iconBlockStyle} title={iconName}>
    <Icon key={count++}/>
  </div>);
}

export default class SVGIconList extends React.Component<any, any> {

  render() {
    return (
      <div>
        {childrenNodes}
      </div>
    );
  }
}