Topic: Customize the size of a button

birmain pro asked 5 years ago


Hello I want to get a button bar to create a navigation control on a data source (forward, back, add, refresh ...), I will need at least 10 botons with icons, but the smallest button I get is too big for me purpose. How can I customize the exact size of a button with a single icon?

birmain pro commented 5 years ago

I've customized it with css. Is there a way to do it within MDB?

Arkadiusz Idzikowski staff answered 5 years ago


Dear hellomdb, You can use one of the predefined color classes on mdb-icon element. For example:
<mdb-icon class="black-text" icon="star"></mdb-icon>
Regards, Arek

hellomdb pro answered 5 years ago


Hello damian,
for 2nd option, how to color the icon?
I tried to use color="primary" at anchor and icon, also flat button and icon but it did not work
<a color="primary">
<mdb-icon icon="user" size="2x" color="primary"></mdb-icon>
</a>
<button mdbBtn type="button" size="sm" color="primary" rounded="true" flat="true" mdbWavesEffect >
<mdb-icon icon="user-circle" size="2x" color="primary"></mdb-icon>
</button>
Thank you.
 

Damian Gemza staff answered 5 years ago


Dear birmain, For the buttons there's size="sm" or size="lg" input when you're using mdbBtn directive on your button element. But if even size="sm" is too big for you, and you need only icon with some action (href or links), please try to use only icons without button with icon. So for example, your code would look in two ways: 1st: Button with size="sm" property:
<button mdbBtn color="primary" size="sm" mdbWavesEffect>Button</button>
2nd: a element with icon in it:
<a>

<mdb-icon icon="user" size="sm"></mdb-icon>

</a>
Best Regards, Damian

hellomdb pro commented 5 years ago

Hello damian, for 2nd option, how to color the icon? I tried to color at anchor and icon below but it did not work Thank you.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags