Angular2 Material2 <md-spinner> does not display, but works

Question

My assumption is that my css is wrong, but alas, I cannot figure it out.

<div *ngIf="loading"> <md-progress-circle mode="indeterminate" color="warn">Loading...</md-progress-circle> </div> <md-list> <md-list-item *ngFor="let incident of incidents"> <h3 md-line> {{name}} </h3> <p md-line> <span>{{date}} > </span> <span>{{text}}</span> </p> </md-list-item> </md-list> 

Answer 1

You need to make sure you use the theme for @ angular / stuff.

In the getting started guide :

Include kernel styles and themes:

It is necessary to apply all the basic and thematic styles to your expression. You can use a pre-created theme or define your own custom theme.

• See the topic guide for instructions.

I found using @ angular / material without a theme to work just for a while. Text inputs work, but radio buttons, check boxes - and, it seems, spinners - require that the theme work correctly.

As indicated in the quote, you can use one of the provided topics (currently 6) or create your own. Submitted topics can be included in your css using @import(' ~@angular /material/core/theming/prebuilt/<theme>.css') .

Answer 2

Edit:

[color] = "warn" [Mode] = "'undefined'"

Use square brackets to snap. Since you directly assign strings, you need to use "and"

Add this line to the index.html header

<link href = "https://unpkg.com/@ angular / material / core / theming / prebuilt / indigo-pink.css" rel = "stylesheet">

Answer 3

In my case, I had a terrific font counter and it worked, but was not visible because the FontAwesome CSS file was not yet fully loaded. The solution was to use npm angular2-fontawesome rather than linking the css file in index.html.

Answer 4

For me, fixing these properties helps

 /deep/ .mat-progress-spinner circle, /deep/ .mat-spinner circle { stroke: white; } 

where white is your visible spinner color