title: CSS and making an SVG icon change on hover
body: <p>This is the menu item in my boostrap menu:</p>
  
  <pre><code>&lt;li class="nav-item"&gt;
   &lt;a href="#" class="icon"&gt;&lt;span class="number"&gt;1&lt;/span&gt;
     &lt;img src="images/svg-icons/notifications-active.svg" alt="" /&gt;
   &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>As you can see there is an SVG image being pulled in with a class attached as "icon"</p>
  
  <p>Here's the CSS that I thought would make it switch to a different color:</p>
  
  <pre><code>&lt;style media="screen"&gt;
  .icon:hover {
      fill: #DA4567;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Any idea what I am doing wrong or doesn't it work like that?</p>
  
  <p>Thanks!</p>