角材料轮廓边框输入看起来不建议使用

Question

我对角度不熟悉，我正在尝试使用角度材料来显示这样的轮廓输入stackblit 并且我已经导入了MatFormFieldModule, MatInputModule和角度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>

但是我的轮廓输入看起来很奇怪：

我缺少明显的东西吗？