How can I automatically import an icon which fetches from the server in NextJS?

Question

I want to dynamically generate a page in the Next-JS app. Inside this page should be imported automatically Icons which fetches from the server Instead of writing it statically:

{ 
    "id": 1, 
    "title": "Budget", 
    "value": "$24K",
    "persent" :"12%",
    "duration" :"Since Last Month",
    "icon":"MoneyIcon",
    "rise":"false"

},

in this timeMoneyIcon from Material-UI.

In this case, was used map method in order to render fetched data. How can I put this fetched icon name as a tag same as <MoneyIcon/> in the component?

        {posts.map((post) => (
          <>
            <Grid item lg={3} sm={6} xl={3} xs={12}>
              <Card sx={{ height: "100%" }}>
                <CardContent>
                  <Grid container spacing={3} sx={{ justifyContent: "space-between" }}>
                    <Grid item>
                      <Typography color="textSecondary" gutterBottom variant="overline">
                        {post.title}
                      </Typography>
                      <Typography color="textPrimary" variant="h4">
                        {post.value}
                      </Typography>
                    </Grid>
                    <Grid item>
                      <Avatar
                        sx={{
                          backgroundColor: "error.main",
                          height: 56,
                          width: 56,
                        }}
                      >
                        **<MoneyIcon />**

                      </Avatar>
                    </Grid>
                  </Grid>

                  <Box
                    sx={{
                      pt: 2,
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    <ArrowDownwardIcon color="error" />
                    <Typography
                      color="error"
                      sx={{
                        mr: 1,
                      }}
                      variant="body2"
                    >
                      {post.persent}
                    </Typography>
                    <Typography color="textSecondary" variant="caption">
                      {post.duration}
                    </Typography>
                  </Box>
                </CardContent>
              </Card>
            </Grid>
          </>
        ))}

Answer 1

If I understand you correctly you are trying to pass the MUI Icon to the Component and render the icon. For that you can simply pass the Icon as a value of your object wrapped in a React Fragment.

import AccountBalanceIcon from '@mui/icons-material/AccountBalance';

const myObject = {
  id: 1,
  value: "24K",
  icon: <><AccountBalanceIcon/></>
)};

export default function MyComponent(props) {
    return(
    <div>
        <span>{myObject.value}</span>
        {myObject.icon}
    <div>
    )
}