Angular Material mat-form-field input field icon

Question

In Angular project I have Angular Material mat-form-field my icon appears outside left from <input> field with placeholder on the right side:

<mat-form-field appearance="fill" class="fld">
  <mat-icon matPrefix class="my-icon">sentiment_very_satisfied</mat-icon>
  <input
    matInput 
    placeholder="myPlaceholder"
    class="inp"
  />
</mat-form-field>

I'm trying to figure out how to put icon inside the <input> tag field on the same left side by matPrefix

I've tried:

<mat-form-field appearance="fill" class="fld">
  <input
    matInput
    placeholder="myPlaceholder"
    class="inp"
  >
    <mat-icon matPrefix class="my-icon">sentiment_very_satisfied</mat-icon>
  </input>
</mat-form-field>

error NG5002: Void elements do not have end tags "input"

Also maybe if I've to use <md-input-container> I've tried import { MdInputModule } from '@angular/material'; but app.module.ts does not load this way.

'MdInputModule' is declared but its value is never read

As I've a bit custom design, here is my my-comp.component.scss:

mat-form-field {
  width: 100%;
  background-color: #da2ba6;
}

::ng-deep .mat-form-field-infix {
  top: -3px;
  background-color: #da2ba6;
}

.inp {
  width: 90%;
  height: 34px;
  border-radius: 20px;
  background: #fff;
  text-align: right;
}

.my-icon {
  z-index: 1;
  position: relative;
}

.fld {
  width: 100%;
}

And here is actual result, appears outside:

and desired result in a right side inside the input field, in one line with placeholder, which is already exist on right side, also inside input field (just not included in image):

Any advice would be helpful

In https://material.angular.io/components/form-field/overview, if you replace "matSufix" by "matPrefix" looks like work :( — Eliseo, Apr 09 '21 at 11:41
@Eliseo Hello, yes matPrefix sets icon to the left side just as label before and outside of the input field. I'm trying to figure out, how to put it inside of input field — , Apr 09 '21 at 11:48
in this forked stackblitz https://stackblitz.com/edit/angular-kwqgg2?file=src/app/form-field-appearance-example.html the icon is **inside**, check if you has a css or your form is inside a div that get off the icon. — Eliseo, Apr 09 '21 at 12:14
Try this answer: https://stackoverflow.com/questions/43416783/how-to-put-icon-in-placeholder-in-angular-material — matsch, Apr 09 '21 at 12:53
@Eliseo I've edited my post with css, because I've a bit custom style. Please check my edit — , Apr 09 '21 at 12:57
@matsch Hello, yes this requires 'import { MdInputModule } from '@angular/material' but by some reason I'm not able to import it, everything else from Mat...Module-s works fine, but not just '@angular/material' — , Apr 09 '21 at 13:02

score 20 · Answer 1 · answered Apr 09 '21 at 13:06

20

<input> is a void element : it's not meant to contains elements. It means there is no existing closing tag </input> allowed.

You must remove this closing tag and place your <mat-icon> tags after (while still into the mat-form-field tags) :

<mat-form-field appearance="fill" class="fld">
  <input
    matInput
    placeholder="myPlaceholder"
    class="inp"
  >
  <mat-icon matPrefix class="my-icon">sentiment_very_satisfied</mat-icon>
</mat-form-field>

Here is the current official example with both prefix and suffix :

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Telephone</mat-label>
    <span matPrefix>+1 &nbsp;</span>
    <input type="tel" matInput placeholder="555-555-1234">
    <mat-icon matSuffix>mode_edit</mat-icon>
  </mat-form-field>
</form>

answered Apr 09 '21 at 13:06

Gérôme Grignon

3,859
1
6
18

1

I too would recommend to do it this way – matsch Apr 09 '21 at 13:10
@Gérôme Grignon Hello, I've checked your code, both examples, but it is still outside, I've provided css, there is nothing more, except color for this input. The icon appears only outside, on the purple background, not inside the input field with white background – Apr 09 '21 at 13:26
the matPrefx and marSuffix are meant to be outside of the input tag as showcased onto the offcial docs. You can't really add the icon into the input tag. But if you want it to visually be into the white part, you need to add css so align the icon with the input tag and to change its background/border to feeel like it's the same element – Gérôme Grignon Apr 09 '21 at 13:37
@Gérôme Grignon Well I've tried different ways, but seems like I'm not quite understand how to do it float: left; with relative position just moves away from left side – Apr 09 '21 at 14:35

score 1 · Answer 2 · answered Jul 28 '21 at 10:05

I created a small example to demonstrate the right use of matPrefix and matSuffix. You don't have to set any additional css, but: import the right Modules in your *module.ts and stylesheets in your angular.json!

https://stackblitz.com/edit/angular-ivy-12pssg

score 0 · Answer 3 · answered Apr 11 '21 at 10:56

I like put the .css in styles.scss (to share inside all the aplication) If we can not affect to another component we add a "prefix", e.g. .special.

I imagine a .css (repeat, in styles.css)

.special.mat-form-field{
background-color:pink;
}
.special.mat-form-field-should-float .mat-form-field-label-wrapper
{
  top:-2.5rem;
  left:-1em;
}

.special.mat-form-field-appearance-fill .mat-form-field-underline::before, .special.mat-form-field-appearance-fill .mat-form-field-ripple {
    width: 80%;
    left: 10%;
    top:0.25em;
}
.special .mat-hint{
  margin-top:1rem
}
.special.mat-form-field-appearance-fill .mat-form-field-flex {
  margin-top:0;
    border-radius: 20px;
    padding: 0 .75em 0 .25em;
    background-color: white;
}
.special .mat-form-field-wrapper{
  padding: .5em .5em;
}
.special .mat-form-field-prefix, .special .mat-form-field-suffix {
    top: 0em; 
}
.special.mat-form-field-appearance-fill .mat-form-field-infix {
    padding: 0.25em 0 0.25em .125em;
    margin-top:0em;
}
.special.mat-form-field-appearance-fill .mat-form-field-infix >input{
    padding: 0.125em 0 .625em .125em;
    margin-top:-2em;

}

See stackblitz

DISCLAMER: Really I'm a "poor designer", I don't know if there're a better way to do it

Angular Material mat-form-field input field icon

3 Answers3

Linked