Adding icon to the Angular Material input

Question

I am trying to achieve the following thing with angular material input with an appearance outline.

To add an icon with an outline at the right side of the input, this image also should be inside the material tab. So far so good my code looks like this:

<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>

and style as well

.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;
  }
}
}

I believe the problem is with this part

  .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;
    }
  }

In order to achieve my goal I had to use a lot of unreliable codes with margins and sizes, etc. because of that my input doesn't look stable, what I mean by that is that on different screens input looks really awful and out of mat input field.

Alex Alex · Accepted Answer · 2021-02-10T17:01:42

<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>

No additional css needed, just use a mat-icon button with the matSuffix directive on the button.

Adding icon to the Angular Material input

1 Answers