title: Show mat-icon on hover
body: <p>I have <code>mat-list</code> in my html template:</p>
  
  <pre><code>&lt;mat-list *ngFor="let item of items"&gt;
    &lt;mat-list-item&gt;&lt;mat-icon&gt;add&lt;/mat-icon&gt; {{ item.title }}&lt;/mat-list-item&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <p>I want to display <code>mat-icon</code> only on <code>mat-list-item</code> hover. So I come up with this css:</p>
  
  <pre><code>mat-icon {
    display: none;
  }
  
  mat-list-item:hover + mat-icon {
    display: block;
  }
  </code></pre>
  
  <p>But for some reason it is does not work</p>
  
  <p>However if I do try to change the background color it is works:</p>
  
  <pre><code>mat-list-item:hover {
    background-color: #3f51b5;
  }
  </code></pre>
  
  <p>It is probably something to do with <code>mat-icon</code> 
  Thoughts?</p>