Angular Material Dynamic Suffix Icon Color Change

Photo by Arif Wahid on Unsplash

Scenario

We want to change the search suffix icon color to primary when the #searchInput field is focused.

Approach

Use the focused property of the #searchInput field.

<mat-form-field floatLabel="never">
    <input matInput 
           #searchInput="matInput" 
           type="text" 
           placeholder="Search"/>
    <mat-icon [color]="searchInput.focused ? 'primary' : ''" matSuffix>search</mat-icon>
</mat-form-field>

Demo