Topic: MDBIcon Not Working
Using MDBIcon throughout my project doesn't work.
import {
MDBNavItem, MDBNavbar, MDBNavbarNav, MDBIcon,
MDBBtn, MDBDropdownToggle, MDBDropdown,
MDBAvatar, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";
<MDBNavItem>
<div onClick={this.handleToggleClickA}
key="sideNavToggleA"
style={{
lineHeight: "32px",
marginRight: "1em",
verticalAlign: "middle"
}}
>
<MDBIcon icon="bars" color="white" size="2x"/>
</div>
</MDBNavItem>
Package.json:
"dependencies": {
"@babel/core": "7.0.0",
"@babel/plugin-syntax-jsx": "7.2.0",
"@babel/preset-env": "^7.5.4",
"@sentry/browser": "^5.5.0",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"babel-plugin-react-css-modules": "^5.2.6",
"btoa": "^1.2.1",
"cookies-next": "^1.0.6",
"core-js": "3.1.4",
"css-loader": "1.0.0",
"dotenv": "^8.0.0",
"dotenv-webpack": "^1.7.0",
"firebase": "^6.2.4",
"firebase-admin": "^8.2.0",
"firebase-functions": "^3.0.2",
"hoist-non-react-statics": "^3.3.0",
"isomorphic-unfetch": "^3.0.0",
"mdbreact": "*removed*/mdb/react/re-pro.git",
"mini-css-extract-plugin": "0.4.3",
"next": "^9.0.2",
"next-compose-plugins": "^2.2.0",
"next-fonts": "^0.17.0",
"next-images": "^1.1.2",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-ga": "^2.6.0",
"react-no-ssr": "^1.1.0",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^6.1.1",
"redux-thunk": "^2.3.0",
"rollkit": "^2.0.1",
"webpack": "4.4.0"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@zeit/next-source-maps": "^0.0.3",
"babel-plugin-inline-react-svg": "^1.1.0",
"cpx": "^1.5.0",
"cross-env": "^5.2.0",
"firebase-tools": "^7.0.2",
"rimraf": "^2.6.3"
}
Do I need to install something else for the Icons to work?
Hi @Subin Jacob,
Did you import styles in index.js file? Info about it is here.
I mean this:
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
Check it and tell me if the issue still exists.
Best regards, Konrad.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.18.0
- Device: PC
- Browser: Chrome Browser
- OS: Windows 10
- Provided sample code: No
- Provided link: No