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

Answer 1

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