title: adding style to mat-option of mat-autocomplete
body: <p>I have this HTML <a href="https://stackblitz.com/edit/angular-mat-autocomplete-with-selected-value-vx1uqg?file=src%2Fapp%2Fautocomplete-display-example.html" rel="nofollow noreferrer">code here</a></p>
  <pre><code>&lt;div style=&quot;width: 150px&quot;&gt;
    &lt;form class=&quot;example-form&quot;&gt;
    &lt;mat-form-field class=&quot;example-full-width&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;Assignee&quot; aria-label=&quot;Assignee&quot; matInput [formControl]=&quot;myControl&quot; [matAutocomplete]=&quot;auto&quot;&gt;
      &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; [displayWith]=&quot;displayFn&quot;&gt;
        &lt;mat-option *ngFor=&quot;let option of filteredOptions | async&quot; [value]=&quot;option&quot;&gt;
          {{option.name}}
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The default behaviour of <code>mat-option</code> is using</p>
  <pre><code>
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  
  </code></pre>
  <ol>
  <li><p>I want to break the long sentence into next line rather than using <code>...</code> . The styling wont work :(</p>
  </li>
  <li><p>I also need to override the font which I tried also using below code, but it wont override</p>
  </li>
  </ol>
  <pre><code>mat-option {
      font-family: &quot;Times New Roman&quot;, Times, serif; // does not work
    }
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-mat-autocomplete-with-selected-value-vx1uqg?file=src%2Fapp%2Fautocomplete-display-example.scss" rel="nofollow noreferrer">styling here</a></p>
  <p>Please help.</p>