title: How to solve mat-datepicker-toggle position problem?
body: <p>I've imported material to my Angular 8 project successfully and I'm using bootstrap 
  for styling.
  I don't plan to use all the material library, only when required. Datepicker from
  material is one example I need to use.</p>
  
  <p>I've tried to use the mat-datepicker and encountered problem with the alignment of
  the toggle.</p>
  
  <p>here is the template:</p>
  
  <pre><code>&lt;input type="text" class="form-control" name="my_date" [matDatepicker]="myDatepicker"
   style="width: 80px;"
   #myDate="ngModel" [(ngModel)]="mydate" id="my_date"&gt;                                        
   &lt;mat-datepicker-toggle  matSuffix [for]="myDatepicker"&gt;&lt;/mat-datepicker-toggle&gt;                                                                                
   &lt;mat-datepicker #myDatepicker&gt;&lt;/mat-datepicker&gt;  
  </code></pre>
  
  <p>The toggle is displayed and functioned correctly but it jump to a new line.
  I don't wish to use mat form or mat form field cause I'm using boostrap.
  Any idea how to align the toggle with the same line of the textbox ?</p>
  
  <p><a href="https://i.stack.imgur.com/T9KVA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T9KVA.png" alt="enter image description here"></a></p>
  
  <p>Thanks.</p>