how to use two matSuffix mat-icons in input line

Issue

I am facing this problem, I need the add the cancel icon in the same line. and for the cancel icon after I put input then only it need to show enter image description here

I am trying the below code.

expecting like this.enter image description here

I need to add 'mat Suffix' mat-icons into a single input line.

HTML:

 <div fxLayout="row" class="search">
        <div fxFlex="80">
          <mat-form-field appearance="outline" class="search-box">
            <input class="search-input" matInput placeholder="Search Vendors" [formControl]="myControl"
        [matAutocomplete]="auto" [(ngModel)]="searchKey"/>
            <mat-icon matPrefix class="search-icon">search</mat-icon>
            <mat-icon matSuffix class="fliter-icon">filter_alt</mat-icon>
            <mat-icon  matSuffix class="cancel-icon" aria-label="Clear"*ngIf="searchKey"  (click)="onSearchClear()">close</mat-icon>
               <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let option of filteredOptions" [value]="option">
            {{option.supplierName}}
          </mat-option>
        </mat-autocomplete>
          </mat-form-field>
</div>

CSS:

.search-icon {
  font-size: 22px;
  margin-top: 10px;
  margin-left: 10px;
}

.fliter-icon {
  font-size: 22px;
  margin-top: 10px;
  margin-left: 10px;
  cursor: pointer;
}
`your text`
.search-input {
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 2px;
}


.search-box {
  font-size: 12px;
}

:host::ng-deep
  .mat-form-field-appearance-outline
  .mat-form-field-outline-start {
  border-radius: 58px 0 0 58px !important;
  flex-grow: 1;
}

:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0 58px 58px 0 !important;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: #eaecef;
  border-radius: 58px;
}

:host::ng-deep .search-box .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}

Solution

You can modify the CSS which might fix the issue.

.search-icon {
  font-size: 22px;
  margin-top: 10px;
  margin-left: 10px;
}

.fliter-icon {
  font-size: 22px;
  margin-top: 10px;
  margin-left: 10px;
  cursor: pointer;
}

.search-input {
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 2px;
}

.search-box {
  font-size: 15px;
  line-height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:host::ng-deep
  .mat-form-field-appearance-outline
  .mat-form-field-outline-start {
  border-radius: 58px 0 0 58px !important;
  flex-grow: 1;
}

:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0 58px 58px 0 !important;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: #eaecef;
  border-radius: 58px;
}

:host::ng-deep .search-box .mat-form-field-wrapper {
  padding-bottom: 0 !important;
}
:host::ng-deep .search-box .mat-input-underline.mat-form-field-underline {
  bottom: 0px;
}

stackblitz

Answered By - Naren Murali