title: change checkbox icon doesn't work
body: <p>I'm trying to customize checkbox on angular2 + google material.
  I create a custom css to replace checkbox icon but I can't click on it.</p>
  
  <pre><code>input[type=checkbox]{
      display: none;
  }
  
  input[type=checkbox]:checked + label:before{
      font-family: "Material Icons";
      content: '\E834';
      color: #295da7;
      display: inline-block;
      vertical-align: middle;
  }
  
  input[type=checkbox] + label:before{
      font-family: "Material Icons";
      content: '\E835';
      color: #295da7;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      font-size: 18px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6tbJe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6tbJe.png" alt="style"></a></p>
  
  <p>the other situation that I can click, the browser render 2 checkboxes.</p>
  
  <pre><code>input[type=checkbox]:checked:before{
      font-family: "Material Icons";
      content: '\E834';
      color: #295da7;
      display: inline-block;
      vertical-align: middle;
  }
  
  input[type=checkbox]:before{
      font-family: "Material Icons";
      content: '\E835';
      color: #295da7;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      font-size: 18px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cRRJR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cRRJR.png" alt="error2"></a></p>
  
  <p>I'm using google chrome, but, the error happens on other browsers.</p>