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 priority commented 4 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 4 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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