angular/material2 mat-spinner resize

you can add this to your css file:

mat-spinner {
  zoom: 0.2
}

here is the answer :

<mat-spinner mode="indeterminate" style="margin:0 auto;" [diameter]="30"></mat-spinner> 

With the latest update you should use the diameter property:

<mat-spinner [diameter]="70"></mat-spinner>

The diameter represents the amount of pixels for both the width and the height of the spinner. In this case it has a size of 70x70 pixels.

See the following stackblitz example:

https://stackblitz.com/edit/angular-material2-progress-spinner


I'm not sure why your styling did not bring the desired results. As you mentioned, the svg content inside md-spinner will scale to the container's size, so applying width and height to the md-spinner should work.

CSS

md-spinner {
  float:left; 
  width: 24px; 
  height: 24px; 
  margin: 5px 10px 0px 0px;
}

Template

<button md-raised-button>
  <md-spinner></md-spinner>Raised Button with spinner
</button>

Plunk

http://plnkr.co/edit/RMvCtOCV9f4TxgB4G0Yz?p=preview

Is this what you'd like to achieve?