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?

        
                      

              相关标签:
       
      

Answer 1

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>

Answer 2

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 3

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>

Answer 4

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

Answer 5

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

Answer 6

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