Fixing icons underline problem on before or after pseudo elements used in a "a" tag on Internet Explorer

icon-underlin-fix.css

If you have a link with an icon, you can put the icon in a ::before pseudo element. 
However, IE will add the underline also the to icon which is not the case in other browsers.
Also the link will have a underline not exactly below the text, it will cover also some part of the
left side, the reason for that is because the HTML white spacing.
Also you shouldn't add another class on the same element which changes padding-left because
you will override the one needed on the link

The best solution which will cover everything:

%icon-base {
  font-family: 'Icons';
  ...
}

.icon-link {
  display: inline-block;
  position: relative;
  padding-left: 20px;
  
  &::before {
    @extend %icon-base;
    
    position: absolute;
    left: 0;
    top: calc(50% - 0.5em);
    text-decoration: underline;
    display: inline-block;
  }
  
  // Fix for IE removing underline on icons (adding and removing text-decoration helps)
  &::before,
  &::before:hover {
    text-decoration: none;
  }
}