Change input control for select ionic angular - html

Question

I'm new in ionic angular, so I have a table where I use a select as:
<ion-row>
<ion-col size="3">
<mat-form-field appearance="fill">
<mat-label>Per page</mat-label>
<select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</mat-form-field>
</ion-col>
</ion-row>
So it shows something like:
As you can see it has an arrow down. I want this same arrow on input, my current input:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<input #clientInput (keyup)="(0)" [matAutocomplete]="auto" [formControl]="company" matInput [(ngModel)]="selectedCompany"/>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='loadContacts($event.option.value)'>
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ion-col>
Is it possible to change the input for select in order to show arrow-down?
As Chiranjaya Denuwan comment bellow I changed it to:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<mat-select class="custom-dropdown">
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-select>
</mat-form-field>
It is showing as I want, problem is not changing table on selection change, I think is because I missing <mat-autocomplete> that I have on my original input, but when I try to add, it just does not load any option in select

Answer 1

Here you can use Angular material select.
input a class attribute into the mat-select
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select class="custom-dropdown">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
then CSS ,
.custom-dropdown ::ng-deep.mat-select-arrow-wrapper {
visibility: hidden;
}