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>

Answer 2

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 Module s in your *module.ts and stylesheets in your angular.json !

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

Answer 3

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", eg .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