Components: bug[matPrefix]: mat-icon as prefix not aligned

[merlosy]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-icon and placeholder should be on the same line when field is empty

What is the current behavior?

mat-icon element is too high, support mat-icon with matPrefix directive?

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

https://stackblitz.com/edit/angular-macdjt?file=app/input-prefix-suffix-example.html

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

consistency

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

Material 5.2.1,
Angular 5.2.5
OS: windows 10
Chrome

Is there anything else we should know?

thanks

[donroyco]

Have you checked this issue while using 6.0.0.? See @mmalerba's comment in #10093

[mmalerba]

Yep, I think the spec seems to be moving toward icons that are centered in the input/label box. I believe this is for consistency with the newer outline and fill appearances.

These two images from the spec illustrate what I'm talking about:

Notice how in both versions the datepicker dropdown arrow is centered. Also notice that the calendar icon actually lives outside the form field and is aligned with the text for the underline style, but centered with the fill style. So as far as I can tell the spec is suggesting to put the icon outside the form-field if you want to align it like that.

Of course this is all just our default styling, you can also add CSS to align your prefix / suffix icons with the text if you like.

[merlosy]

@donroyco thanks for the link, i didn't see that one.
IMO, there is still something that doesn't feel right about the style of this element.

The new layout for text fields seems better, but when is it planned for?

[mmalerba]

The new styles are available in the 6.0.0 betas. The feature isn't documented yet, but you just need to set the appearance input on the form-field

[ghost]

This is still an issue in version 6

[angular-automatic-lock-bot[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._}