MatInput with MatPrefix does not conform to the Material spec for icons and text

[AndrewEckart]

Bug, feature request, or proposal:

Proposal / feature request.

What is the expected behavior?

The official Material guidelines state that text input fields which are prefixed with an icon (referred to as "icon signifiers" in the spec) should display the icon as floating to the left of the text field, centered vertically.

Note that the specified behavior for icons is different from the specified behavior for text-only prefixes. Text prefixes are covered by another part of the Material guidelines:

These guidelines also show that the label should extend to the left above a text prefix. Text prefixes should be treated differently than icon prefixes.

What is the current behavior?

Currently, an icon given matPrefix will be displayed above the underline, which extends to the left below the prefix.

The icon is also not vertically centered with the input itself. In the lower example, a span element containing a text-only prefix shifts the label to the right which also conflicts with the Material guidelines.

What are the steps to reproduce?

StackBlitz

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

Conforming to the Material guidelines will provide a more faithful implementation and make apps built using Angular Material more visually consistent with Material apps on other platforms, such as Android.

Inputs with icons and prefixes are very common, so this affects many apps using Angular Material. The desired behavior can probably be replicated using custom CSS, but this might require penetrating the shadow DOM of mat-form-field which would be messy and this behavior shouldn't require that much effort.

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

All of them.

Is there anything else we should know?

AngularJS Material correctly implements icon signifiers, but does not seem to support text prefixes.

Though it was built with React (boo), a good example of Material-looking text fields with icon signifiers is Patreon's Sign Up page.

I would propose keeping the existing matPrefix directive for text-only prefixes, correcting the label position to start at the left side of the prefix instead of to the right, and perhaps adding a new directive such as matIconPrefix or something similar for icon signifiers.

[crisbeto]

This is being discussed in #9366.

[mmalerba]

prefix/suffix are specifically for putting things inside the underlined area. I don't think we need to create a special attribute for icon signifier because its easily accomplished by just placing an icon next to a form field: https://stackblitz.com/edit/angular-material2-issue-gg58rj?file=app/app.component.html (though I could see adding an example to the docs demonstrating this).

The issue of text vs icon prefixes is being discussed in #9366 as @crisbeto mentioned. My position on it is that prefix/suffix should be used to implement the inline icons shown in the spec e.g.:

While the text "prefix" and "suffix" are really types of helper text (a concept which currently doesn't exist in Angular Material). These behave more like a placeholder; they don't push the label in and appear only when the label is floating, e.g.:

[AndrewEckart]

@mmalerba Thanks for the quick response.

I like your distinction between icon signifiers as passive indicators which describe the type of content the field contains versus icon prefixes/suffixes as interactive buttons that transform the input in some way (password show/hide button, clear button, etc). The docs would definitely benefit from one or two examples along those lines, and I will try my hand at contributing them if needed.

As for "helper text" (though this term is also used in the docs to refer to what Angular Material calls "hints"), I agree with @crisbeto's analysis in #9366 that this is basically a form of masking, and I think you're right that it should only appear when the label is floated and shouldn't push the label.

There is actually even more nuance here because the mask should behave differently in various situations. Using the examples you linked, we have cases where:

• Text is an example of a valid input (Destination and Password fields). This should disappear when the user begins entering a value.
• Text is a 'prefix' which should be visible when the input is focused and the label is floated (Amount field). This should be present regardless of whether the field is empty or contains a value.
• Text is a complete mask, with both placeholder characters and formatting characters surrounding them (Phone number field). In the example, we would expect the placeholder numbers to disappear when the user types, but the parens and dash should remain in place. Also, should all of the placeholder numbers disappear when the first number is typed, or should they disappear one-by-one as the user enters numbers to replace them?

Some of these details aren't covered by the spec, and I understand it may be difficult to support all of the different possibilities or that masking may even be considered out of scope given that there are libraries solely for this purpose. Does the Angular Material team plan to support masking, and if so will it be in a more limited way (dollar sign prefix) or a more advanced way (placeholders/formatting characters)?

[mmalerba]

I still need to do some research into it before deciding if masking is something we want to get into in Angular Material. I'll probably wind up creating at least a minimal solution for text prefix and suffix, since this is something we encouraged people to do with matPrefix and matSuffix for a while. If we're asking people to stop, we should provide an alternative. Beyond that, masking will likely be out of scope for Angular Material, unless I can come up with a way to do it that won't break accessibility.

[AndrewEckart]

Thanks. Since everything seems covered, I'll go ahead and close this issue. I can use the existing matPrefix and matSuffix for both text and interactive icons for now, which is a decent stopgap until there's official support for text prefixes and suffixes.

[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.}