title: Angular Material: CheckBox in mat-menu; Problem with dark themes
body: <p>You can't put a <code>&lt;mat-checkbox&gt;</code> in a <code>&lt;mat-menu&gt;</code> normally. If so, dark themes don't apply to the <em>text-part</em> of your <code>&lt;mat-checkbox&gt;</code> <em>(see the image at the end)</em>.</p>
  
  <p>About <code>&lt;mat-label&gt;</code>s there is a similar issue. But the solution is simple:</p>
  
  <ul>
  <li><em>Using <strong></em><code>&lt;label mat-menu-item&gt;</code><em></strong> instead of <strong></em><code>&lt;mat-label&gt;</code><em></strong>.</em></li>
  </ul>
  
  <p>Similarly about <code>button</code>s.</p>
  
  <hr>
  
  <p>But I couldn't find a similar solution for <code>&lt;mat-checkbox&gt;</code>es! These are all states that I tested:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-menu #menu="matMenu"&gt;
    &lt;mat-label&gt;Bad label&lt;/mat-label&gt;
    &lt;label mat-menu-item&gt;OK label&lt;/label&gt;
    &lt;mat-checkbox&gt;Problem here&lt;/mat-checkbox&gt;
    &lt;!-- ERROR:
    &lt;mat-checkbox  mat-menu-item&gt;
      Template parse errors:
  More than one component matched on this element.
    &lt;/mat-checkbox&gt;
    --&gt;
    &lt;br&gt;&lt;mat-checkbox&gt;&lt;/mat-checkbox&gt;
    &lt;label mat-menu-item style="display:inline"&gt;Not good workaround&lt;/label&gt;
  &lt;/mat-menu&gt;
  </code></pre>
  
  <p><strong><em><a href="https://stackblitz.com/edit/angular-j4ftuc?embed=1&amp;file=app%2Fmenu-overview-example.html" rel="noreferrer">stackblitz</a></em></strong></p>
  
  <p>And the result:</p>
  
  <p><a href="https://i.stack.imgur.com/Kn9X1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Kn9X1.png" alt="enter image description here"></a></p>