How I can add dropdown arrow within input in mat-autocomplete

Question

I use mat-autocomplete to filter my data. Everything is work but I want to have a dropdown arrow to show all option within the input. In md-autocomplete , we can use dropdown-arrow="true" but in mat-autocomplete is not support it. So how I can add a dropdown arrow in mat-autocomplete? This is my component.ts

<form class="example-form">
    <mat-form-field class="example-full-width">  

    <input type="text" aria-label="Number" matInput 
    [formControl]="myControl" [matAutocomplete]="auto4"
    [hidden]="loadWithFilters&&loadWithFilters.field==='IP'">  

    <mat-autocomplete #auto4="matAutocomplete" dropdown-arrow="true" 
    (optionSelected)="onFilterOptionSelected($event,'IP')" >  

    <mat-option *ngFor="let option of filteredIP | async" 
    [value]="option.key">
        {{option.value}}
    </mat-option>
   </mat-autocomplete>  
   </mat-form-field>
</form>

Answer 1

essentially you are attaching an mat-autocomplete with an matInput, so you can style the form-field separately and then attach the mat-autocomplete to it.

please refer this stackblitz for full code demo.

form-field icons can be added like this.

Your code should look like this -

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto4"/>
        <mat-icon matSuffix>keyboard_arrow_down</mat-icon>

        <mat-autocomplete autoActiveFirstOption #auto4="matAutocomplete" (optionSelected)="onFilterOptionSelected($event)" >
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>