title: How to pass a icon and text to a button in React?
body: <p>I have to pass an icon and text to a button, and this button is in a component, and that component name is ReusableButton in my project. My problem is I have two more buttons with same button style, but the icon and text are different. So If I know how to pass an icon and text to a button, then I can resume that button component. I will share my code so please go through it once. Still, if I am not clear with my doubt please
  put comment </p>
  
  <p>This is App.js</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import Navbar from './Navbar/Navbar'
  import Button from './Button/Button'
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Navbar&gt;&lt;/Navbar&gt;
        &lt;Button&gt;&lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  
  <p>This is App.css</p>
  
  <pre><code>I didn't apply any css in App.css
  </code></pre>
  
  <p>This is Navbar.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Navbar.css';
  
  
  class Navbar extends Component {
      render() {
          return (
              &lt;div className='container-fluid'&gt;
                  &lt;div className='row'&gt;
                      &lt;div className='col-6'&gt;
                          &lt;nav className="logoclass navbar navbar-expand-lg navbar-light"&gt;
                              &lt;a className='hyperlinkStyle' href='www.facebook.com'&gt;
                                  &lt;img className='logoStyle' src='assets/images/logo.png' alt='logo'&gt;&lt;/img&gt;
                              &lt;/a&gt;
                              &lt;button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
                                  &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Navbar
  
  </code></pre>
  
  <p>This is Navbar.css</p>
  
  <pre><code>/* logoStyle css starts here */
  .logoStyle {
      width:103px;
      margin-top: -4%;
      margin-left: 88%;
  }
  /* logoStyle css ends here */
  
  /* this css used to remove dots in li of ul, starts here */
  li {
      list-style-type: none;
  }
  /* ends here */
  
  /* helpStyle css starts here */
  .helpStyle {
      color: #00b2d6;
      cursor: pointer;
      font-size: .75rem;
      font-family: 'Roboto', sans-serif;
  }
  /* helpStyle css ends here */
  
  .lione {
      display: inline-block;
  }
  
  .litwo {
      display: inline-block;
  }
  
  .lithree {
      display: inline-block;
  }
  
  .border {
      background-color: transparent;
      border-radius: 1%;
  }
  
  .english {
      color: #524c61;
      font-size: .75rem;
      font-family: 'Roboto', sans-serif;
      font-size: .75rem;
  }
  
  .flagStyle {
      height:.75rem;
      margin-left: .5em;
      margin-right: .25em;
      margin-top:-2.5%;
  }
  
  .rupeeStyle {
      margin-left: .5em;
      color: #b2aebd;
      font-size: .75rem;
  }
  
  .buttonStyle {
      background-color: transparent;
  }
  </code></pre>
  
  <p>This is Button.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Button.css'
  import ReusableButton from '../ReusableButton/ReusableButton';
  
  class Button extends Component {
      render() {
          return(
              &lt;div className='container'&gt;
                  &lt;div className='row'&gt;
                      &lt;div className='col-12'&gt;
                          &lt;ReusableButton&gt;&lt;/ReusableButton&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  export default Button
  </code></pre>
  
  <p>This is Button.css</p>
  
  <pre><code>I didn't apply any css in Button.css
  </code></pre>
  
  <p>I created this component to reuse, This is ReusableButton.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import './ReusableButton.css';
  
  
  class ReusableButton extends Component {
     render() {
         return(
             &lt;div className='button'&gt;
                 &lt;button type='button' class='btn-primary buttonStyle'&gt;Click here&lt;/button&gt;
             &lt;/div&gt;
         )
     }
  }
  
  export default ReusableButton
  </code></pre>
  
  <p>This is ReusableButton.css</p>
  
  <pre><code>
  .buttonStyle {
      border: none;
  }
  </code></pre>
  
  <p>My Goal is to pass Icon and text to a button.</p>