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

リンクされている StackBlitz の再現環境から始め、legacy と non-legacy の appearance 間で mat-form-field の prefix と suffix のレンダリングを比較してください。複数の mat-icon または mat-icon-button 要素が横一列に表示されることを確認し、影響を受けるすべての appearance で動作が一貫していることを検証してください。

索引モデルが issue の本文から書いたものです。