How to properly use MaterialUI icons in CoreUI React

Ava 0
Viewed 24

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'

core-ui material-ui reactjs
2 Answers
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
userWDJY0

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" />,.

dark0
Related