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 material.angular.io/components/form-field/overview, if you replace "matSufix" by "matPrefix" looks like work :( — Eliseo
@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 — iose936
in this forked stackblitz stackblitz.com/edit/angular-kwqgg2?file=src/app/… the icon is inside, check if you has a css or your form is inside a div that get off the icon. — Eliseo
@Eliseo I've edited my post with css, because I've a bit custom style. Please check my edit — iose936

Gérôme Grignon Gérôme Grignon · Accepted Answer · 2021-04-09T13:06:55

<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>

Angular Material mat-form-field input field icon

3 Answers