Динамически загружать иконки в компонент

Я пытаюсь динамически загружать в компонент иконки реакции. Код выглядит так:

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import * as MaterialDesign from 'react-icons/md';

const styles = {
 default: {
  flexDirection: 'column',
  alignItems: 'center'
 },
 inline: {
  flexDirection: 'row'
 }
};

const StyledTabs = styled.button`
 display: flex;
 cursor: pointer;
 color: ${props => props.color};

 ${props => styles[props.type]}
`;

const Tabs = ({ icon, type, text, color }) => {
 return (
  <StyledTabs icon = {icon} type = {type} text = {text} color = {color}>
   <span>
    <MaterialDesign.MdHome />
   </span>
   <span>{text}</span>
  </StyledTabs>
 );
};

Tabs.propTypes = {
 /** Text of tab */
 text: PropTypes.string.isRequired,
 /** Text of tab */
 type: PropTypes.oneOf(['default', 'inline']),
 color: PropTypes.string,
 icon: PropTypes.string
};

Tabs.defaultProps = {
 type: 'default',
 color: '#000',
 icon: ''
};

/**
 * @component
*/
export default Tabs;

Итак, мне нужно имя значка реакции в значке свойства и поместить строку в <MaterialDesign.MdHome />. MdHome будет строкой, указанной в значке свойства, например. MaterialDesign.{icon} поможет с этим сделать?