fix(form-field): multiple projected block-level prefix/suffix stacking on top of each other

[crisbeto]

Fixes multiple block elements that are projected inside a prefix or a suffix stacking on top of each other, rather than going sideways.

[crisbeto]

@mmalerba as far as I could tell there shouldn't be any visual differences, but you might have some more insights.

[TFleury]

We also need to fix alignments with :

.mat-form-field-flex {
  align-items: center;
}

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

With this, mat-icon and mat-icon-button are vertically aligned (all browsers)
And it also fixes the strange behavior of Edge/IE with mat-icon-button and mat-datepicker-toggle.(#11650, #13094, #13322 & #13592)

[mmalerba]

@TFleury applying those styles seems to cause misalignment of the prefix and suffix in the legacy form field.

I'm fine with this change, but I never really intended for people to use multiple prefix/suffix. If people want to do something like that they can make a single prefix/suffix which is a wrapper div and aligns its children however they want

[TFleury]

@mmalerba I pushed another PR (#14369) with scoped style changes.

[mmalerba]

It looks like this does actually cause some slight alignment changes in people's apps. I think I'd rather not make this change and instead encourage people to only use a single matPrefix / matSuffix (even if that single element is a wrapper containing several sub-elements).

[crisbeto]

Makes sense. Closing since it seems like a high risk change for a rare case that shouldn't really be supported.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}