components: Can't set height and Width of spinner since beta.12
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Set width and height
What is the current behavior?
<mat-spinner style="width:40px; height: 40px" color="primary"> </mat-spinner>
has no effect since upgrade to beta.12
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 5
- Comments: 24 (4 by maintainers)
You can use the input parameter “diameter”. (beta.12)
<mat-spinner [diameter]="40"></mat-spinner>I’ve just run into this as well after upgrading to beta12. IMHO the old behaviour was much better, I prefer to size components via CSS rather than input values. Seems a bit hacky to have to use
!important.Closing as the height is controlled via
diameter@mawo87 Can define the stroke width with
[strokeWidth]input parameter https://material.angular.io/components/progress-spinner/api@dgadelha
<mat-spinner [diameter]="48"></mat-spinner>instead of<mat-spinner diameter="48"></mat-spinner>I think the only issue left is that this isn’t documented in the demo page for the spinner.
If you set a low diameter (e.g. 20) you may end up with an undesirable progress-spinner, such as the one below. This can be resolved by also configuring the strokeWidth to a low number (e.g. 2).
Try to use diameter option. 70 is 70px size <mat-spinner [diameter]=“70”></mat-spinner>