title: matSuffix not working when wrapped inside of matFormField
body: <p>I am currently trying to write a global datepicker. For that I created a component observing the given example from angular (<a href="https://material.angular.io/guide/creating-a-custom-form-field-control" rel="nofollow noreferrer">https://material.angular.io/guide/creating-a-custom-form-field-control</a>). I only want to outsource a part of the whole mat-form-field, so this what I was doing:</p>
  <p><em>app.component.html:</em></p>
  <pre><code>  &lt;mat-form-field color=&quot;accent&quot; floatLabel=&quot;always&quot;&gt;
      &lt;mat-label&gt;Date of Birth&lt;/mat-label&gt;
      &lt;my-date-picker formControlName=&quot;birthday&quot;&gt;&lt;/my-date-picker&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  <p><em>my-date-picker.component.html:</em></p>
  <pre><code>&lt;input matInput [matDatepicker]=&quot;picker&quot; placeholder=&quot;TT.MM.JJJJ&quot; [ngModel]=&quot;value&quot;
    (ngModelChange)=&quot;modelChanged($event)&quot;&gt;
  &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
  </code></pre>
  <p>(I think the .ts shouldn't be important for my problem)</p>
  <p>But now it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/ouGns.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ouGns.png" alt="enter image description here" /></a></p>
  <p>This also happens if I would wrap it like this in the app.component.html:</p>
  <pre><code>  &lt;mat-form-field color=&quot;accent&quot; floatLabel=&quot;always&quot;&gt;
      &lt;mat-label&gt;Date of Birth&lt;/mat-label&gt;
      &lt;div&gt;
        &lt;input matInput [matDatepicker]=&quot;picker&quot; placeholder=&quot;TT.MM.JJJJ&quot; [ngModel]=&quot;value&quot;
        (ngModelChange)=&quot;modelChanged($event)&quot;&gt;
        &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
        &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
      &lt;/div&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  <p>Because then it renders the matSuffix as part of the mat-infix. <strong>So it seems like the matSuffix is not recognized correctly.</strong>
  <a href="https://i.stack.imgur.com/abBL6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/abBL6.png" alt="enter image description here" /></a></p>
  <p>Whilst it would render it like this without the extra wrapper (divs):
  <a href="https://i.stack.imgur.com/o9dyz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o9dyz.png" alt="enter image description here" /></a></p>
  <p>Putting:</p>
  <pre><code>&lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
  </code></pre>
  <p>in the app.component.html is not an option. I tried this and this just leads to other errors, which are worse than the css error.</p>