title: Angular Material not displaying correct style
body: <p>I'm trying to use Angular Material for an Autocomplete component in a template based form, but it basically does nothing to the style of the input.</p>
  
  <p>I've imported all modules and the style as explained in the <a href="https://material.angular.io/guide/getting-started" rel="nofollow noreferrer">official docs</a>, but no changes, this is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/N81D2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N81D2.png" alt="enter image description here"></a></p>
  
  <p>And this is what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/sbSP8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sbSP8.png" alt="enter image description here"></a></p>
  
  <p>And this is my code:</p>
  
  <p>html:</p>
  
  <pre><code> &lt;mat-form-field&gt;
        &lt;input type="text" matInput [formControl]="myControl" name="myFirstMaterialComp" [matAutocomplete]="auto"&gt;
   &lt;/mat-form-field&gt;
   &lt;mat-autocomplete #auto="matAutocomplete"&gt;
         &lt;mat-option *ngFor="let location of locations | async" [value]="location.toponymName"&gt;
                &lt;span&gt;{{ location.toponymName }}&lt;/span&gt; |
         &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p>And I have all my imports in ts as well as the import for the css class, I'm sure it's something very obvious that I'm missing, but I just can't figure out what...</p>
  
  <p><strong>EDIT</strong> for clarity:</p>
  
  <p>I have imported the angular theme with the line provided in the docs:</p>
  
  <pre><code>@import "~@angular/material/prebuilt-themes/indigo-pink.css";
  </code></pre>