title: Hover effect affecting both SVG icon and text content in a HTML link element
body: <p>Let's say I have the following HTML:</p>
  
  <pre><code>&lt;a href="#"&gt;
   &lt;svg class="icon"&gt;
   &lt;!-- SVG content --&gt;
   &lt;/svg&gt;
   Link text
  &lt;/a&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>a:hover {
    color: #0074D9;
  }
  
  icon:hover {
    fill: #0074D9;
  }
  </code></pre>
  
  <p>Now I want a hover effect (let's say a color change) that acts on the whole <code>a</code> group. That is, the user should see <em>both</em> the icon and the text changing color when hovering over the <code>a</code> element.</p>
  
  <p>Something like this (from the Instapaper website):</p>
  
  <p><img src="https://i.imgur.com/Er8itfO.png" alt="instapaper"></p>
  
  <p>Right now, using the markup and the style rules above, i'm only able to get this on Chrome:</p>
  
  <p><img src="https://i.imgur.com/oIKWoJ1.png" alt="myapp"></p>
  
  <p>Hovering over the text doesn't affect the icon. Hovering over the icon works:</p>
  
  <p><img src="https://i.imgur.com/XJpOdnh.png" alt="myapp2"> </p>
  
  <p>Seems like a trivial task but after some failed attempts I realized that I'm probably missing something.</p>