MDBIcon not displaying icons in React App

Question

I am trying to use MDB React forms in my application. I have downloaded mdbreact using the command npm install --save mdbreact.

Below is the code snippet :

       <div className="text-center py-4 mt-3">
          <MDBBtn className="btn btn-outline-purple" type="submit">
            Send
            <MDBIcon far icon="paper-plane" className="ml-2" />
          </MDBBtn>
        </div>

but the icon is not displayed and MDBBtn color is not purple. Anyone, please suggest.

Try it without the word `far`. Also, are you importing like this `import { MDBIcon, MDBBtn } from "mdbreact"` ? — stever, Jan 26 '19 at 16:38
I have added "import "mdbreact/dist/css/mdb.css";,now the colour is displaying purple,but still the icon is missing.Yes ,I have imported all these such as { MDBIcon, MDBBtn } — kinnu, Jan 26 '19 at 16:43

score 0 · Answer 1 · answered Sep 17 '19 at 02:35

In the documentation you have to add in index.js these importations:

import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";

check the documentation about mdbreact...you find this..

score 0 · Answer 2 · answered Oct 19 '20 at 19:35

0

npm install mdbreact
import { MDBIcon} from 'mdbreact';

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

use it: <MDBIcon icon="lightbulb" size="4x"/>

answered Oct 19 '20 at 19:35

hassan kamarzadeh

313
3
6

would you add a brief explanation of why those steps fix the issue in the question? – lucasreta Oct 19 '20 at 20:22

MDBIcon not displaying icons in React App

2 Answers2