How to properly use MaterialUI icons in CoreUI React-CodePudding

I need to use Material UI icons in a React dashboard template of CoreUI, for that, i installed @mui/material and @mui/icons-material with:

npm install @mui/material @emotion/react @emotion/styled

And

npm install @mui/icons-material

This is my package.json now:

"dependencies": {
    "@coreui/chartjs": "^3.0.0",
    "@coreui/coreui": "^4.2.1",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-react": "^2.1.0",
    "@coreui/react": "^4.4.0",
    "@coreui/react-chartjs": "^2.1.0",
    "@coreui/utils": "^1.3.1",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.6"
//...
}

Then in the src/_nav.js file, there where should i import the icon and use it. So i tried this code below:

import React from 'react'
import CIcon from '@coreui/icons-react'
import { CNavItem } from '@coreui/react'
import PeopleIcon from '@mui/icons-material/People'

const _nav = [
  {
    component: CNavItem,
    name: 'Users',
    to: '/theme/colors',
    icon: <CIcon icon={PeopleIcon} customClassName="nav-icon" />,
  },
]
export default _nav

Now the NPM in terminal shows Compiled successfully! but i'm getting a blank page with this error in console.dev:

Uncaught Error: Cannot find module '@emotion/react'

CodePudding user response：

first of all, it's recommanded that you restart your npm terminal after installing new package.

Secondly, you can't implement materialUI icon in the same way you use CoreUi icons. You have to use icon: <PeopleIcon />, instead of icon: <CIcon icon={PeopleIcon} customClassName="nav-icon" />,.

CodePudding user response：

import React from 'react'
import CIcon from '@coreui/icons-react'
import { CNavItem } from '@coreui/react'
import PeopleIcon from '@mui/icons-material/People'

const _nav = [
  {
    component: CNavItem,
    name: 'Users',
    to: '/theme/colors',
    icon: <PeopleIcon />,
  },
]
export default _nav