Using an icon as a button


Topic: Using an icon as a button

Jolie O'Dell asked 3 years ago

I would like to use an icon as a button, so I want it to have the behavior of a button but I don't want it to be in a box, is there a way to achieve it? Like the login button or even the contact/envelope on the nav bar.


Aliaksandr Andrasiuk staff answered 3 years ago

Hi,

You can simply use MDBIcon component with onClick property:

  <MDBIcon
        icon='user-alt'
        className='cyan-text'
        size='3x'
        style={{ cursor: 'pointer' }}
        onClick={...}
      />

or pass flat property to <MDBBtn> component(flat property is only available for Pro users):

<MDBBtn flat size='lg'>
        <MDBIcon icon='bolt' size="3x" className="cyan-text" />
  </MDBBtn>

Hope I could help.

Best regards.


Roman Mzh pro premium priority commented 3 years ago

Had same issue and already tried both of your suggestions. Unfortunately, styled MDBIcon needs custom CSS for hover event and padding. And it looks ugly with , waves. MDBBtn flat is also not a good solution. It has different X and Y padding's, so the button is always a rectangle.

It should be possible to combine flat and floating props to have something like Gmail has:

https://imgur.com/IG6RRFj


Aliaksandr Andrasiuk staff commented 3 years ago

Unfortunately, for now, it's not possible without applying your custom css.

But it's a good idea to improve our icon and button components to make this possible.

Maybe you have some other recommendations to improve our components or product? We will appreciate it!


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.19.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mojave
  • Provided sample code: No
  • Provided link: No