Icon path prop not accepting strings?

[void-m4110c]

Hi,

I have a data array of tile-objects over witch I map, to generate some Material-UI grid.

I want to generate multiple grid-items (Cards) with different Icons. However, passing <Icon path={tile.icon}.... (tile.icon is the string "mdiCog") does not display anything. If I insert <Icon path={mdiCog}.... it works perfectly.

       <Grid container spacing={3}>
          {tiles.map((tile) => {
            return (
              <Grid item xs={12} md={3} key={tile.id} alignItems="center" justify="center">
                <Card className={classes.card}>
                  <CardActionArea
                    onClick={() => router.navigate(router.linkTo(tile.target))}
                    className={classes.cardAction}
                  >
                    <Icon
                      path={tile.icon}        <----------------------- here --------------------------------
                      title="User Profile"
                      size={4}
                      horizontal
                      vertical
                      rotate={90}
                      color="red"
                      spin
                    />
                    <CardContent className={classes.cardContent}>
                      {/* <Icon className={classes.icon} icon={factoryIcon} /> */}
                      <Typography variant="h6" align="center">
                        {i18n.translateToString(tile.title)}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
              </Grid>
            );
        </Grid>

What am I overlooking?

[Templarian]

Sorry I don't really monitor this repo. Not sure my guess is that tile.icon isn't actually set.

{tile.icon} in the template above the icon tag and see if the value renders.

Closing this out as I assume it's so old it was solved (hopefully).