Angular2 Material2 <md-spinner> not showing but is working

Question

My assumption is that my css is not correct, but alas I cannot figure this 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're using a theme for @angular/material.

From the getting started guide:

Include the core and theme styles:

This is required to apply all of the core and theme styles to your application. You can either use a pre-built theme, or define your own custom theme.

• See the theming guide for instructions.

I've found using @angular/material without a theme to work only some of the time. Text inputs work but radiobuttons, checkboxes - and it appears the spinners - require a theme to work properly.

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