Using an icon as a button

web
mobile

Topic: Using an icon as a button

Jolie O'Dell asked 11 months 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 11 months 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 commented 11 months 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 11 months 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.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.19.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mojave
  • Provided sample code: No
  • Provided link: No