Is it possible to make an md-button smaller?

Question

I want my buttons showing left- and right arrow and NOW text to be as small as possible. How do I do that?

<div ng-controller="DateCtrl" layout="row" flex>
     <md-datepicker ng-model="activeDate" md-placeholder="Enter date" ng-change="changeDate()"></md-datepicker>
     <div>
         <md-button class="md-raised" ng-click="prev()">&lt;</md-button>
         <md-button class="md-raised" ng-click="changeToday()">NOW</md-button>
         <md-button class="md-raised" ng-click="next()">&gt;</md-button>
     </div>
</div>

With the current solution the buttons will be arranged as if they were in a layout="column", that is vertically.

Before I dig into this CSS-style, I just wanted to check if there is a preferred Angular-Material way of doing this?

Do you want the text itself to be smaller or the button itself, have you considered adding a custom class to the buttons and just add your own styling and then reuse that class where ever you might feel you want to use this again? — TrojanMorse, Oct 15 '15 at 12:17
I just want the button to be smaller, the text should be the same size. There is supposed to be an .md-mini class, but it doesn't do anything with the button size. I am looking into using md-icon-button instead, will try it out later today and see if I get smaller buttons then. — Andreas Selenwall, Oct 15 '15 at 13:08

Tiago · Accepted Answer · 2017-10-31T11:13:41.023

41

Add the following to your styles:

.md-button {
    min-width: 1%;
}

Alternatively, use a custom class:

.md-button.md-small {
    min-width: 1%;
}

Or, in Angular Material 2:

.mat-button.mat-small {
    min-width: 1%;
}

edited Oct 31 '17 at 11:13

answered Nov 09 '15 at 12:36

Tiago

4,233
13
46
70

score 23 · Answer 2 · edited Apr 15 '22 at 14:43

23

Try the following class in your styles. You can adjust the pixel depending on how big/small you want the button to be.

.md-button.md-small {
     width: 20px;
     height: 20px;
     line-height: 20px;
     min-height: 20px;
     vertical-align: top;
     font-size: 10px;
     padding: 0 0;
     margin: 0;
}

edited Apr 15 '22 at 14:43

Joshua Michael Calafell

2,945
34
47

answered Mar 04 '16 at 06:19

user1242321

1,578
2
18
30

score 14 · Answer 3 · answered Jul 01 '19 at 14:15

14

You could use css transform: scale(). You have to play with margins a little bit, but it isn't much code and you can go smaller or bigger pretty easily.

.shrink-2x {
     transform: scale(0.5);
}

.enlarge-2x {
     transform: scale(1.5);
}

Example

answered Jul 01 '19 at 14:15

tbone849

925
8
18

leaves same footprint, though. so, if you have a group of buttons, you'll see too much space between them – user3337629 Feb 21 '23 at 18:08

score 8 · Answer 4 · edited Apr 15 '22 at 14:42

8

I used this style for making a smaller md-button

button {
    min-height: 23px !important;
    min-width: 46px !important;
    font-size: 10px !important;
    line-height: 0px; 
}

edited Apr 15 '22 at 14:42

Joshua Michael Calafell

2,945
34
47

answered Apr 29 '16 at 03:53

Sameeksha Kumari

1,158
2
16
21

score 3 · Answer 5 · answered Jul 13 '17 at 17:49

I'm using https://github.com/angular/material2

this creates smaller mini-fab.

.del {
  width: 30px;
  height: 30px;
}

.del .mat-icon {
    padding: 4px 0;
    line-height: 22px;
}

<button md-mini-fab (click)="onDeleteValue(valIndex)"
        type="button"
        color="warn"
        class="del">
    <md-icon>close</md-icon>
</button>

score 2 · Answer 6 · edited Apr 15 '22 at 14:42

I found that font-size must be on md-icon, and I needed a min-height on both the md-button and md-icon tags.

<md-button
    class="md-exclude
    md-icon-button
    md-primary"
    style="margin-right:0;
    padding:0; height:20px;
    min-height:1px;"
    ng-click="openfn($event, newnote)"
    aria-label="note">
    <md-icon
        class="material-icons"
        style="font-size:20px;
        min-height:1px;">
        info_outline
    </md-icon>
    <md-tooltip md-direction="top">
        {[{ ::tooltiplabel }]}
    </md-tooltip>
</md-button>

score 1 · Answer 7 · answered Aug 19 '21 at 04:34

Many answers here have superfluous CSS properties used. This is all you need:

.my-mat-button {
  line-height: 1;
  min-width: 0;
  padding: 7px 15px 5px; // adjust as needed
}

you may also want to (or not) tweak font-size and border-radius but that goes without saying.

score 0 · Answer 8 · edited Apr 15 '22 at 14:38

If you are using md-icon-button, then material sets a width, height and padding for the icon:

.md-button.md-icon-button {
   margin: 0 6px;
   height: 40px;
   min-width: 0;
   line-height: 24px;
   padding: 8px;
   width: 40px;
   border-radius: 50%;
}

so you need to override it ("auto" works well if you want the button to fit the parent)

.md-button.md-small {
    padding: 0px;
    margin: 0px;
    height: auto;
    width: auto;
    min-height: 20px;
}

score 0 · Answer 9 · edited Apr 15 '22 at 14:39

0

Tiago's answer worked for me.

If you are using variants of mat buttons , raised button for example -

.mat-raised-button {
    min-width: 150px;
}

edited Apr 15 '22 at 14:39

Joshua Michael Calafell

2,945
34
47

answered May 24 '19 at 13:56

Akshaya

1
1

Joshua Michael Calafell · Answer 10 · 2022-04-15T14:37:05.140

-1

Simply add .mat-small (for Angular Material 2+) to the Button's classes and no custom styles needed.

For Angular Material

<button
  mat-button
  class="mat-small"
</button>

edited Apr 15 '22 at 14:37

answered Apr 14 '22 at 19:48

Joshua Michael Calafell

2,945
34
47

Is it possible to make an md-button smaller?

10 Answers10

Linked

Related