title: mat-form-field in mat-list-item overlapping
body: <p>I am implementing an . user interface for the firebase login. For that i am using <code>angular material</code>. </p>
  
  <p>For easier input correction on the user side i want to implement <code>mat-hint</code>s for the user to show an error whenever the user typed something that was not expected. </p>
  
  <pre><code>&lt;mat-card&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title&gt;Login&lt;/mat-card-title&gt;
      &lt;mat-card-subtitle&gt;Log into your existing account&lt;/mat-card-subtitle&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;mat-list&gt;
        &lt;mat-divider&gt;&lt;/mat-divider&gt;
        &lt;h3 mat-subheader&gt;Profile&lt;/h3&gt;
        &lt;mat-list-item&gt;
          &lt;mat-icon mat-list-icon&gt;alternate_email&lt;/mat-icon&gt;
          &lt;mat-form-field mat-line class="width-100"&gt;
            &lt;input matInput placeholder="Email" [(ngModel)]="email" [formControl]="emailFormControl"
              [errorStateMatcher]="matcher" /&gt;
            &lt;mat-error *ngIf="emailFormControl.hasError('email') &amp;&amp; !emailFormControl.hasError('required')"&gt;
              Please enter a valid email address
            &lt;/mat-error&gt;
            &lt;mat-error *ngIf="emailFormControl.hasError('required')"&gt;
              Email is &lt;strong&gt;required&lt;/strong&gt;
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-list-item&gt;
          &lt;mat-icon mat-list-icon&gt;security&lt;/mat-icon&gt;
          &lt;mat-form-field mat-line class="width-100"&gt;
            &lt;input matInput #passwordtest type="password" placeholder="Password" [(ngModel)]="password" /&gt;
            &lt;mat-hint align="end" *ngIf="passwordtest.value.length &lt; 6"&gt;{{passwordtest.value.length}} / 6 or more&lt;/mat-hint&gt;
          &lt;/mat-form-field&gt;
        &lt;/mat-list-item&gt;
        &lt;mat-divider&gt;&lt;/mat-divider&gt;
      &lt;/mat-list&gt;
    &lt;/mat-card-content&gt;
    &lt;mat-card-actions&gt;
      &lt;button mat-button (click)="login(email, password)"&gt;Login&lt;/button&gt;
    &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>However it seems that the <code>mat-form-field</code> with <code>mat-hint</code>s and placeholders is not designed to work within an <code>mat-list-item</code>, because the result looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/wQkTK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wQkTK.png" alt="enter image description here"></a></p>
  
  <p>if i remove the <code>mat-list-item</code> (and the little icon in front of the <code>mat-form-field</code>) then the hints and placeholders are not overlapping.</p>
  
  <p><a href="https://i.stack.imgur.com/zqYkw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zqYkw.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the result is not pretty as well because the subheader is misaligned with the form field. Additionally, i think that the first option (with the overlapping) looks better because of the little icons.</p>
  
  <p>I'm wondering what my options are in this situation because i don't want to break the material design by adding additional margins or paddings. However, i guess that this is intended behaviour and that i am doing something wrong.</p>
  
  <p><strong>How can i design this user interface in a way that the input fields with hints and placeholders are not overlapping?</strong></p>