Topic: Using an icon as a button
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.
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 2 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:
Aliaksandr Andrasiuk staff commented 2 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!
Answered
- 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