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

Question

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
    })
  )

How are you using the menuList? Please post a minimal reproducible code. — Harsh Saini
– Harsh Saini, Commented Aug 11, 2021 at 10:26

marquinho_rsv · Accepted Answer · 2021-08-11 10:20:14Z

0

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
    })
  )

answered Aug 11, 2021 at 10:20

marquinho_rsv

284 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related