如何在 mat-form-field 旁边设置图标

Question

我目前正在开发一个操作栏，其中包含几个按钮，这些按钮显示一些用于过滤/排序当前数据的选项，但我在调整元素的显示（如其他元素一样）以实现良好的显示时遇到问题。

在此输入图片描述

这是我的操作栏，正如您在查看它时所期望的那样，我希望最后一个元素的图标与其他图标的高度相同，并且选择表单的高度与其他元素。

简单说明一下，每个按钮都会打开另一个组件的模板，例如，在下面的屏幕截图中，我单击了过滤器按钮，这打开了过滤器组件模板。

这是我的代码：

操作栏模板：

<div class="container d-flex flex-wrap align-items-center justify-content-md-center">
  <app-export
  (outExport)="handleExport($event)"
  class="me-5">
  </app-export>

  <div *ngIf="showStats" class="me-5">
    <button type="button" class="btn btn-outline-secondary d-flex align-items-center" (click)="openStatsDialog()" data-bs-toggle="modal-dialog"><i class="bi bi-graph-up mx-1"></i> {{ "component.filter.filter.stats.title" | translate }}
    </button>
  </div>

  <app-display
  (outDisplayChange)="handleDisplayChange($event)"
  class="me-5">
  </app-display>

  <button class="btn btn-outline-secondary me-5" type="button" data-bs-toggle="collapse" data-bs-target="#filters" aria-expanded="false" aria-controls="filters"
  [ngClass]="{'active': filterOpened}" (click)="filterOpened = !filterOpened">
    <i class="bi bi-funnel"></i> {{ "component.filter.input.name" | translate }}
  </button>
  
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#sorts" aria-expanded="false" aria-controls="sorts"
  [ngClass]="{'active': sortOpened}" (click)="sortOpened = !sortOpened">
    <i class="bi bi-sort-alpha-down"></i> {{ "component.filter.filter.sorting.title" | translate }}
  </button>


</div>

<app-filter
    (outFilter)="handleFilter($event)"
    (outFilterAuthor)="handleFilterAuthor($event)"
    (outFilterTitle)="handleFilterTitle($event)"
    [docs]= "docs"
    class="me-5">
</app-filter>
    
<app-sort
    (outFilterOrder)="handleOrderFilter($event)"
    class="me-5">
</app-sort>

过滤器组件模板：

<div class="row collapse multi-collapse mt-4" id="filters">
    <div class="d-flex flex-wrap align-items-center">
        <div class="input-group me-3 col">
          <div class="input-group-prepend">
            <span class="input-group-text h-100"><i class="bi bi-pencil-square"></i></span>
          </div>
          <input #title type="text" class="form-control text-center" (input)="filtreTitre()" [placeholder]="'component.filter.input.title' | translate">
        </div>
      
          <div class="input-group me-3 col">
            <div class="input-group-prepend">
              <span class="input-group-text h-100"><i class="bi bi-person"></i></span>
            </div>
            <input #auth type="text" class="form-control text-center" (input)="filtreAuteur()" [placeholder]="'component.filter.input.author' | translate">
          </div>
      
          <div class="input-group col">
            <span class="input-group-prepend input-group-text h-100" style="align-self:flex-start;"><i class="bi bi-file-earmark"></i></span>
            <mat-form-field [formGroup]="filterGroup" appearance="fill">
              <mat-label>{{ "component.filter.input.doctype" | translate }}</mat-label>
              <mat-select multiple formGroupName="docType" (selectionChange)="onSelectionChange($event, 'docType', true)" [(value)]="selectedDocTypes">
                <ng-container *ngFor="let doc of docTypes">
                  <mat-option [value]="doc.code" *ngIf="doc.code !== 'POSTER'">{{ 'global.doctypes.' + doc.code | translate }}</mat-option>
                </ng-container>
              </mat-select> 
            </mat-form-field>
          </div>
    </div>
</div>

我已经尝试将图标放入 mat-form-field 中，但效果不佳，我也尝试使用 bootstrap，但同样，效果不佳（也许我做错了什么，所以欢迎任何建议）。

更新：我尝试使用 mat-icon，因为我发现了名为“matPrefix/matSuffix”的东西，但它似乎不起作用......

Answer 1

这是包含您的图标的标签：

<span class="input-group-prepend input-group-text h-100" style="align-self:flex-start;"><i class="bi bi-file-earmark"></i></span>

您应该将其移至表单字段内，并向其中添加

matTextPrefix

属性（您也可以删除添加的自定义属性）。
您的代码将如下所示：

<mat-form-field [formGroup]="filterGroup" appearance="fill">
  <mat-label>{{ "component.filter.input.doctype" | translate }}</mat-label>
  <mat-select multiple formGroupName="docType" (selectionChange)="onSelectionChange($event, 'docType', true)" [(value)]="selectedDocTypes">
    <ng-container *ngFor="let doc of docTypes">
      <mat-option [value]="doc.code" *ngIf="doc.code !== 'POSTER'">{{ 'global.doctypes.' + doc.code | translate }}</mat-option>
    </ng-container>
  </mat-select> 
  <span matTextPrefix><i class="bi bi-file-earmark"></i></span>
</mat-form-field>

您可以在此处查看演示（带有美元符号）： https://v16.material.angular.io/components/form-field/examples

如果您想要与示例不同的东西（具有不同的边框或背景），您可能还需要向其添加额外的自定义属性，但我真的不建议使用有角度的材料这样做。