javascriptarraysmaterial-uiiconshtml-escape-characters

Unable to display actual material-ui icon within my nav menu

Using Material-UI icons like <AddOutlinedIcon /> as shown below, how can I actually make the icon appear in my nav menu as atm it displays the tags/word <AddOutlinedIcon /> before my menu name?

Unsure if I need to escape this inorder to display actual icon?

It should actually be displaying a + icon before my menu name.

  const menuList = [];

  myMenu.map(menuListItem =>
    menuList.push({
      id: menuListItem.manu_name,
      icon: '<AddOutlinedIcon />',          
      active: false
    })
  )
Solution

  • Have you tried removing the AddOutlinedIcon as a string value?

      const menuList = [];

  myMenu.map(menuListItem =>
    menuList.push({
      id: menuListItem.manu_name,
      icon: <AddOutlinedIcon />,          
      active: false
    })
  )