MDBIcon Not Working


Topic: MDBIcon Not Working

Subin Jacob asked 3 years ago

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?


Konrad Stępień staff answered 3 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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