custom mat-autocomplete iconm code example

Example: custom mat-autocomplete iconm

<mat-form-field class="col-12">
		<mat-label>{{label}}</mat-label>
		<input type="text" matInput [matAutocomplete]="auto">
		<i class="material-icons align-arrow-right">arrow_drop_down</i>
		<mat-autocomplete #auto="matAutocomplete" dropdown-arrow="true">
			<mat-option *ngFor="let option of options" [value]="option">
				{{option}}
			</mat-option>
		</mat-autocomplete>
		<mat-hint>{{hint}}</mat-hint>
</mat-form-field>
...
.align-arrow-right {
	position: absolute;
	right: 0; //change as per requirement
	top: 0; //change as per requirement
}

Tags:

Misc Example