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?

Solution 1

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%;
}

Solution 2

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;
}

Solution 3

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

Solution 4

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; 
}

Solution 5

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>

View more solutions