Angular Material Spinner doesn't render

Question

I am trying to create a app using Angular Material, even the documentation is pretty much ok, but there is no much help otherwise. I am using Angular4 and Angular-cli. So I installed and just created a simple spinner tag like this:

<div class="text-center">
  <img src="assets/Capture13.PNG" alt="" class="toplogo">
</div>

<div class="text-center">
    <mat-spinner> </mat-spinner>
</div>

<div>
    <input type="button" class="close" (click)="login('user','pwd')" value="hello" >
</div>

It didn't render anything. Shows a blank window

I thought there is some issue with installation, but then I went to inspect the page and saw the following:

When I hovered my mouse over the controls, it clearly shows I have a shape which is rotating exactly similar to a spinner. It makes me believe that the components is loading, but it is not just visible for some reasons. I installed Hammerjs too as recommended in documentation, and included the hammerjs, and prebuilt pink theme in my index.html too:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Anyone has any idea, what I might be missing. On top of it, I am not getting any error that it is not rendering etc because it seems that it does render. Any help please?

Answer 1

The problem comes from your pink-theme I think because if I remove it from the plunker, I have the same problem. So you can try to add in your style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css"