How do I add material Icons to an array and pass it through props

Question

I am working on a project with react, typescript and material icons

I want to add my material icons to an array and pass it through props

but it shows me the letters(string) of the icon

example is in this code which it displays on the browser is

export interface IDashboard {
  dashboardItems: {
    color: string;
    count: number;
    itemName: string;
    icon?: any;
    backgroundColor: string;
  }[];
}  

Dashboard

import { IDashboard as IState } from "../utils/Types";
const Dashboard = () => {
      const dashboardItems: IState['dashboardItems'] = [
        {
          color: "white",
          count: 5,
          itemName: "Users",
          icon: "<GroupIcon />",
          backgroundColor: "#373793",
        },
      ];
 return (
       <DashboardItems dashboardItems={ dashboardItems } />

 )
}

DashboardItems

import { IDashboard as IProps} from "../utils/Types";
import GroupIcon from "@material-ui/icons/Group";
const DashboardItems: React.FC<IProps> = ({ dashboardItems }) => {
  return (
     <div>{dashboardItem.icon}</div>
)}

How do I make it show Icon instead of letters(string)

Answer 1

In the IDashboard change the type of icon to JSX.Element and in the dashboardItems just remove the apostrophe from you component icon: <GroupIcon />, .