Multiple mat-icon or mat-icon-button as prefix or suffix are displayed in columns

[TFleury]

trafficstars

Bug:

More than one mat-icon or mat-icon-button as prefix or suffix in a mat-form-field are displayed in columns when appearance is other than 'legacy'.

What is the expected behavior?

They should display in row like in 'legacy' appearance.

What is the current behavior?

They are displayed in column.

What are the steps to reproduce?

https://stackblitz.com/edit/material-multiple-presuffix

What is the use-case or motivation for changing an existing behavior?

Behavior is not consistent accros mat-form-field appearances.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/material 7.1.0

All browsers.

Is there anything else we should know?

I see 2 solutions : Solution 1 : Remove this two rules :

:not(.mat-form-field-appearance-legacy).mat-form-field .mat-form-field-prefix .mat-icon,
:not(.mat-form-field-appearance-legacy).mat-form-field .mat-form-field-suffix .mat-icon {
    display: block;
}
:not(.mat-form-field-appearance-legacy).mat-form-field .mat-form-field-prefix .mat-icon-button,
:not(.mat-form-field-appearance-legacy).mat-form-field .mat-form-field-suffix .mat-icon-button {
    display: block;
}

Solution 2 : Use flexbox for prefix and suffix :

.mat-form-field-prefix,
.mat-form-field-suffix {
  display: inline-flex;
  align-items: center;
}

Potentially related issues : #11650, #13094, #13322 & #13592

[aennafae]

Fixed it for me on datepicker outlined input field. .mat-form-field-flex { align-items: center; }

[TFleury]

@aennafae thanks, it's the missing part for solution 2 to work properly.

[BenoitMaisonny]

Still an issue with Angular 10.0.0: https://stackblitz.com/edit/angular-mat-form-field-multiple-suffix

[mmalerba]

as a workaround for this, use a single matSuffix div and arrange the items inside however you like: https://stackblitz.com/edit/material-multiple-presuffix-u7kax5?file=app%2Fform-field-prefix-suffix-example.html

[am-castro]

Hi! in newest versions of material angular use this:

anywhere css

::ng-deep .mat-form-field-prefix,
.mat-form-field-suffix {
  display: inline-flex;
  align-items: center;
}

or add in style.css:

.mat-form-field-prefix,
.mat-form-field-suffix {
  display: inline-flex;
  align-items: center;
}

[GaetanRdn]

.mat-form-field-prefix,
.mat-form-field-suffix {
  display: inline-flex;
  align-items: center;
}

for material 15 =>

.mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix { display: inline-flex; align-items: center; }

[neckroot]

mat-icon {
    display: inline;
}