将图标添加到 Angular Material 输入

Question

我正在尝试通过带有外观轮廓的角度材料输入来实现以下目标。

要在输入的右侧添加带有轮廓的图标，此图像也应位于材料选项卡内。到目前为止一切顺利，我的代码如下所示：

<div class="bigInputDiv">
<mat-form-field class="inputSEARCH" appearance="outline">
<mat-label>WWW</mat-label>
<input matInput type="text" formControlName='piradiNomeri'>
<img (click)="moqalaqeSearch('You clicked moqalaqe')" [ngClass]="(moqalaqeTAB.get('piradiNomeri').invalid && moqalaqeTAB.get('piradiNomeri').touched)?'svg error':'svg'" [src]="iconPath + 'addPersonSearch.svg'">
</mat-form-field>
</div>

还有风格

.bigInputDiv{
width: 100%;
max-width: 570px;
display: inline-flex;
width: 100%;
max-width: 700px;

.inputSEARCH {
  width: 100%;
  max-width: 565px;
  border-radius: 3px 0px 0px 3px!important;

  .svg {
    width: 48px;
    height: 47px;
    border-radius: 0px 4px 4px 0px;
    background-color: rgba(0,0,0,.12);
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    position:absolute;
    margin-top: -20px;
    margin-left: -39px;
    &.error{
      background-color: red;
    }
    &:hover {
      background-color: black;
    }
  }
  :hover ~ .svg {
    background-color: black;
  }
  :focus ~ .svg {
    background-color: blue;
  }
  .ng-touched.ng-invalid ~ .svg {
    background-color: red;
  }
}
}

我认为问题出在这部分

  .svg {
    width: 48px;
    height: 47px;
    border-radius: 0px 4px 4px 0px;
    background-color: rgba(0,0,0,.12);
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    position:absolute;
    margin-top: -20px;
    margin-left: -39px;
    &.error{
      background-color: red;
    }
    &:hover {
      background-color: black;
    }
  }

为了实现我的目标，我不得不使用大量带有边距和大小等的不可靠代码，因为我的输入看起来不稳定，我的意思是在不同的屏幕上输入看起来真的很糟糕并且超出了垫子输入字段。

Answer 1

<mat-form-field appearance="outline">
    <mat-label>WWW</mat-label>
    <input matInput>
    <button type="button" mat-icon-button matSuffix>
        <mat-icon>search</mat-icon>
    </button>
</mat-form-field>

不需要额外的 css，只需在按钮上使用带有 matSuffix 指令的 mat-icon 按钮。