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?

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

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