Angular Material mat-form-field input field icon

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

Continue reading...