font-awesome icon in mat select not showing up as expected

Question

I am working on an angular application in which I have a matInput and I am trying to show an icon in the placeholder of matInput. The font-awesome icon I am trying to use is info-circle My Code

<mat-form-field>
    <input matInput
            class = "fas"
            placeholder= "&#xf05a;Default Value"
            [(ngModel)]="Value"
            style="font-family: Arial, 'Font Awesome'">
</mat-form-field>

Using this code I can see an icon but its not coming as expected.

I have cross-checked the icon code and its correct. I am not sure what is going wrong.

Answer 1

I'm not sure if this works. I think you need to add a mat-icon into the form field and mark this as matPrefix:

<mat-form-field>
  <mat-label>A Label</mat-label>
  <input matInput placeholder="Placeholder">
  <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
</mat-form-field>

See docu: material.angular.io/components/form-field/api

Answer 2

You could do this-

In your HTML-

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
    <div class="input-wrapper">
       <mat-form-field>
       <input matInput
                class = "fas"                       
                >
      <label for="stuff" class="fa fa-info-circle"></label>
      </mat-form-field>
    </div>

In your CSS-

.fa-info-circle{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}

::placeholder {
  text-align: center;
}
.input-wrapper{
  position: relative;
}