title: Styling icon inside button
body: <p>I have piece of code like this :</p>
  
  <pre><code>&lt;md-button ng-repeat="s in savedSearchName" 
             ng-click="loadSearch(s)" ng-right-click="removeFilter($event, s)"
             class="filterButton"&gt;
     {{s}}
     &lt;md-icon md-svg-src='style/images/icons/ic_close_24px.svg' class="buttonRemover"
              title="Remove filter" ng-click="removeFilter($event, s)"
     &lt;/md-icon&gt;
  &lt;/md-button&gt;
  </code></pre>
  
  <p>And I'm trying to resize my <code>md-icon</code> and place it in the top-right corner of my button. SO I have the folowwing css :</p>
  
  <pre><code>.buttonRemover {
  color: red;
  position: relative;
  width: 14px;
  height: 14px;
  right: -5px;
  top : 0px;
  float: right;
  }
  </code></pre>
  
  <p>So first : </p>
  
  <p>Why do I need to set a negative <code>right</code> ? (<code>right: 0px</code> doesn't place my icon next to the button's right-border). I'm guessing it has something to do with the <code>float: right;</code> but removing it makes the icon even further from the top-right corner.</p>
  
  <p>Secondly : </p>
  
  <p>How can I display my icon only when the mouse is hover the parent button ?</p>