dynamic tag name from string in JSX

Question

I am trying to create a page with all the icons from react-material-ui. I have found this answer but it does not work for me.

I can create the tag alright but it gets converted to all lowercase.

This is my render function

render: function () {
   return (
      <AppCanvas>
         <AppBar title="Crowd Invest"
                iconElementLeft={<IconButton> <MUI.Libs.SvgIcons.ActionAccessibility/> </IconButton>}/>

         <div style={{padding: '80px',}}>
            {this.allIcons()}
         </div>
      </AppCanvas>
   );
}

This is the allIcons function which returns the list

  allIcons(){
     let iconsList = [];
     var icon = iconName => {
        const MyIcon = 'MUI.Libs.SvgIcons.' + (JSON.stringify(iconName)).replace(/\"/g, '');
        const key = new Meteor.Collection.ObjectID().valueOf();
        return <MyIcon key={key} name={MyIcon}/>
     }
     for( let iconName in MUI.Libs.SvgIcons) {
        iconsList.push(icon(iconName));
     }
     return iconsList;
  }

All the icons are rendered but the tags are all lowercase. This is one of the entries:

<mui.libs.svgicons.actionaccessibility 
    name="MUI.Libs.SvgIcons.ActionAccessibility" 
    data-reactid=".0.$=11.$7615d95988e7d7f1098cd4f1">
</mui.libs.svgicons.actionaccessibility>

This does obviously not work. What do I need to change to make it render?