Mat label text overflow ellipsis not working as a result the mat icon overrides the mat label

Question

Here is the HTML code

<mat-form-field [style.width.%]="'50'">
    <mat-icon matIconPrefix>search</mat-icon>
    <mat-label>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.
    </mat-label>
    <button mat-icon-button matIconSuffix (click)="clearFilters()" matTooltip="Clear filter">
        <mat-icon>close</mat-icon>
    </button>
    <mat-chip-grid #chipList>
        <mat-chip-row *ngFor="let condition of filterConditions" (removed)="remove(condition)">
            {{condition.field ? condition.field + ' = ' + condition.value : condition.value}}
            <button matChipRemove>
                <mat-icon>cancel</mat-icon>
            </button>
        </mat-chip-row>
        <input #filterInput [formControl]="filterCtrl" [matChipInputFor]="chipList" [matAutocomplete]="auto"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)">
    </mat-chip-grid>
    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
        <mat-option disabled class="loading" *ngIf="loading">
            <mat-spinner diameter="35"></mat-spinner>
        </mat-option>
        <mat-option *ngFor="let condition of filteredFilters | async" [value]="condition.value" [disabled]="loading">
            {{condition.name}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Here is the current output

I want mat label to overflow with ellipsis once I change the size of the window so mat icon should not overrides the mat label.