Material Ui: Change mu icons props in array dinamically-CodePudding

I need change props (color, size) for many icons in array (and I use mu v4):

const ICONS_ARRAY: React.ReactNode[] = [
<AlertCircleCheckOutline />,
<AppleSafari />,
<MotionPlay />,
<AppleKeyboardCommand />,
<FileDocumentMultipleOutline />,
<ClipboardArrowLeftOutline />,
<ViewDashboardOutline />,
<CalendarClockOutline />,
<RobotHappyOutline />,
<AccountWrenchOutline />,
<AccountGroupOutline />,
<AccountCogOutline />,
<RunFast />,
<SpeedometerSlow />]

I try this (i - index icon in array):

           <MenuItem>
                <Box>
                    <SvgIcon fontSize={'small'}>ICONS_ARRAY[i]</SvgIcon>
                </Box>
            </MenuItem>,

But icon not render. If I change ICONS_ARRAY[i] on element - it works, like this:

           <MenuItem>
                <Box>
                    <SvgIcon fontSize={'small'}><RunFast /></SvgIcon>
                </Box>
            </MenuItem>

Also I try React.cloneElement, but it work same.

So you have any idea what the problem could be and what is the solution?

CodePudding user response：

I'm going to say something small, but just to dismiss.
Have you tried adding brackets "{}"?
something like this...

        <MenuItem>
            <Box>
                <SvgIcon fontSize={'small'}>{ICONS_ARRAY[i]}</SvgIcon>
            </Box>
        </MenuItem>

Or try this

    {ICONS_ARRAY.map((icon) => (
      <MenuItem>
        <SvgIcon fontSize={"small"}>{icon}</SvgIcon>
      </MenuItem>
    ))}