Угловой материал: ввод четкой кнопки не удаётся

Question

Я пытаюсь заставить этот пример работать в моем первом угловом приложении: https://material.angular.io/components/input/examples поле ввода с кнопкой очистки.

У меня есть следующий код в моем template.html:

<mat-form-field>
        <input matInput type="text" placeholder="Wens" [(ngModel)]="value">
        <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>

и я импортировал следующие модули:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { MatTabsModule } from '@angular/material/tabs';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatCheckboxModule } from '@angular/material';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatIconModule } from '@angular/material/icon';
    import { MatGridListModule } from '@angular/material/grid-list';
    import { MatSlideToggleModule} from '@angular/material/slide-toggle';
    import { MatInputModule } from '@angular/material/input';
    import { MatMomentDateModule } from '@angular/material-moment-adapter';
    import { MatDatepickerModule } from '@angular/material/datepicker';
    import { MatFormFieldModule } from '@angular/material/form-field';

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatTabsModule,
    MatCheckboxModule,
    MatToolbarModule,
    MatIconModule,
    MatGridListModule,
    MatSlideToggleModule,
    MatInputModule,
    MatDatepickerModule,
    MatMomentDateModule

Но значок закрытия выглядит не так, как он должен быть: Кнопка ввода ввода углового материала с неправильной компоновкой

Что я делаю не так?Другие поля формы, которые я использовал, работают нормально.

Answer 1

Я нашел ответ: мне нужно добавить import { MatButtonModule } from '@angular/material/button';, чтобы кнопка работала правильно.