angular/material2 mat-spinner resize

Question

Is there any possible way to change size of mat-spinner or mat-progress-circle?

I read the documentation of mat-spinner and mat-progress-circle but they said that mat-diameter is discontinued and the spinner will take the parent element's size.

How can I put mat-spinner in a mat-button to the left corner without changing the height of the button?

<button mat-button>    <mat-spinner style="float:left;"></mat-spinner>     processing.... </button> 

I also tried to change the height using in-line css like

style="float:left;height:10px;width:10px; 

but is not pretty to see.

Answer 1

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

Answer 2

here is the answer :

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