matPrefix element not aligned properly in form field with appearance fill and outline

[NehalDamania]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

matPrefix Element should be aligned properly with matLabel in MatFormField with appearance set as "Fill" and "Outline"

What is the current behavior?

Not as expected

What are the steps to reproduce?

https://stackblitz.com/edit/angular-xfexy1

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

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

6

Is there anything else we should know?

[fxck]

I wonder how is this supposed to work. I don't see any win-win situation here unless prefix animates along with input focus / label minimisation.

I have a similar problem, trying to combine select with input, unfocused it's fine (don't mind the fact and I haven't really properly aligned it yet)

focused it looks stupid

ideally I'd want to end up with something like this

if the value is set or input is focused

[richardsengers]

It's getting even more ugly ;-) Using an icon as a prefix

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

[inorganik]

Any updates on this? For such a glaring bug, I'm surprised it's still present in 7.2.1.

[taneltm]

From https://material.io/design/components/text-fields.html
If the textfield has a label, the input text should be slightly to the south relative to the suffix icon.

But when there is no label, the input text should be centered relative to the suffix icon.

Angular Material's behavior is this:

Notice that the icon isn't perfectly centered relative to the fill background either.