Set an image icon prior to mat-form-field control

Question

I am a newbie to angular and building a sample application.

I have a situation where I am loading a form from a angular data table. The form on load has attributes that are populated based on data from the database.

For one of the fields in the form, apart from displaying the text, I would like to place an icon before the control to add a visual indicator beyond the text value. This is not an icon from the angular material icon but a custom image.

I am currently facing issues with setting the custom icon inline to the mat-form-field.

When I include the image within the mat-form-field control, i see that icon is in one row and the text field value is in another row.

When I set the image icon outside the mat-form-field control, the label of the field is only above the field value and the image icon shows outside and looks awkward.

Please find the image indicating the issue.

Image below indicates the problem when i have the image control outside of the mat-form-field.

<div class="form-group" *ngIf="showDetailForm">
          <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

When i bring the image control within the mat-form-field, the image and the field value are on different lines.

<div class="form-group" *ngIf="showDetailForm">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

Also, is there a way to set the label field of form field control of angular material in left-right fashion rather than a top-bottom and also increase the size of the label control. Currently the label field looks faded to me.

The CSS classes set on this control have the following code

// This is to set the size of the input mat-form-fields.
.angularformcss {
    font-size: 14px;
    text-align: left;
} 

// This is to remove the line underneath the input controls.
::ng-deep .no-line .mat-form-field-underline {
    display: none;
}

Example Image from JIRA

Answer 1

Add matPrefix directive for img and change some css can get your mat input as your need.

<div class="form-group">
    <mat-form-field class="angularformcss no-line " floatLabel="always">
        <img matPrefix src="https://image.flaticon.com/icons/png/512/23/23765.png" width="24px" height="24px">
        <input matInput placeholder="Issue type" id="issueType">
    </mat-form-field>
</div>

css

:host ::ng-deep .mat-form-field-label-wrapper {
  left: -24px; /* this is the width of image */
}

:host ::ng-deep .mat-input-element {
  margin-left: 5px; /* adding a margin to left of input you can remove it if you want */
}
.angularformcss img {
  margin-bottom: -5px;
}