CODEWITHSUNDEEP
angularuser-interfaceangular-material
James
James

Reputation: 87

How to align material icon on right of a input field?

I am using mat auto complete text box. I have a search icon currently it is aligned left of input. I want to align it on right. Could any one please help me?

<mat-form-field floatLabel="never" class="example-full-width" appearance="outline">
      <input type="search" placeholder="Name"
        aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" />
      <mat-icon color="primary" matPrefix>search</mat-icon>
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

Upvotes: 2

Views: 2625

Answers (1)

Ravi Teja Vattem
Ravi Teja Vattem

Reputation: 414

Just replace your matPrefix with matSuffix

<mat-icon color="primary" matSuffix>search</mat-icon>

Upvotes: 5

Related Questions