Double lines when using md input from angular 2

Question

I'm trying to use the md-input directive from angular 2 material but I'm getting a strange error. I follow the instructions exactly, but I keep getting something that looks like this. I don't know what's causing the double lines below the placeholder. I've searched through the Github issues and found nothing. The code looks exactly like this:

<div class="curtain"></div>
  <md-card class="z-depth-4">
    <md-card-title>
      Login
    </md-card-title>
  <md-card-content class="center">
<md-input-container>
  <input md-input 
  placeholder="Account Number"
  [(ngModel)]="accountNumber"/>
</md-input-container>
  <br>
<md-input-container>
  <input md-input
  placeholder="Username"
  [(ngModel)]="username"/>
</md-input-container>
  <br>
<md-input-container>
  <input md-input
  placeholder="Password"
  type="password"
  [(ngModel)]="password"/>
  </md-input-container>
 </md-card-content>
 <md-card-actions>
    <button class="btn-flat blue-text btn-large right">Login</button>
  </md-card-actions>
</md-card>

any help I could get with this would be fantastic. Thank you!

Answer 1

You may have multiple entries for angular material style-sheets on your index.html.

Make sure you only have these:

link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet"
link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" (tag symbols excluded in comment)