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

#### 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

Start with the linked StackBlitz reproduction and compare the mat-form-field prefix and suffix rendering across legacy and non-legacy appearances. Confirm that multiple mat-icon or mat-icon-button elements display in a row, and verify that the behavior is consistent across the affected appearances.

Written by the indexing model from the issue text.