JSX中字符串的动态标记名称

Question

我正在尝试使用react-material-ui中的所有图标创建一个页面。我找到this answer但它对我不起作用。

我可以创建标记，但它会转换为全部小写。

这是我的渲染功能

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

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

这是返回列表的allIcons函数

  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;
  }

呈现所有图标但标签全部为小写。这是其中一个条目：

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

这显然不起作用。我需要更改什么来使其渲染？