угловой материал, обозначенный границей, выглядит устаревшим

Question

Я новичок в angular, и я пытаюсь использовать угловой материал, чтобы показать наброски, подобные этому stackblit , и я импортировал MatFormFieldModule, MatInputModule и angular FormModule, и это мой html

<form action="">
      <div class="white z-depth-2">
        <div class="row center">
          <div class="col m6 s12">
            <p>
              <mat-form-field appearance="outline">
                <mat-label>Outline form field</mat-label>
                <input matInput placeholder="Placeholder">
                <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                <mat-hint>Hint</mat-hint>
              </mat-form-field>
            </p>
          </div>
 <div class="col m6 s12">
                <p>
                  <mat-form-field appearance="outline">
                    <mat-label>Outline form field</mat-label>
                    <input matInput placeholder="Placeholder">
                    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                    <mat-hint>Hint</mat-hint>
                  </mat-form-field>
                </p>
              </div>

        </div>
      </div>
    </form>

но мой набросок выглядит странно так:

я что-то упускаю из виду?