title: Set an image icon prior to mat-form-field control
body: <p>I am a newbie to angular and building a sample application.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>I am currently facing issues with setting the custom icon inline to the mat-form-field.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Please find the image indicating the issue.</p>
  
  <p>Image below indicates the problem when i have the image control outside of the mat-form-field.</p>
  
  <pre><code>&lt;div class="form-group" *ngIf="showDetailForm"&gt;
            &lt;img src="../../assets/icons8-task-480.png" width="24px" height="24px"&gt;
            &lt;mat-form-field class="angularformcss no-line " floatLabel="always"&gt;
              &lt;input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/nF5wN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nF5wN.png" alt="enter image description here"></a></p>
  
  <p>When i bring the image control within the mat-form-field, the image and the field value are on different lines.</p>
  
  <pre><code>&lt;div class="form-group" *ngIf="showDetailForm"&gt;
            &lt;mat-form-field class="angularformcss no-line " floatLabel="always"&gt;
              &lt;img src="../../assets/icons8-task-480.png" width="24px" height="24px"&gt;
              &lt;input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/H5eQo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H5eQo.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>The CSS classes set on this control have the following code</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>Example Image from JIRA</p>
  
  <p><a href="https://i.stack.imgur.com/stdOy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/stdOy.png" alt="enter image description here"></a></p>