title: Angular Material Icon Button ripples but doesn't fire click
body: <p>I'm noticing that angular material icon buttons have some sort of margin around them where upon click the ripple effect does trigger, but the click handler doesn't.</p>
  
  <p>I've reproduced this in Safari, Firefox, Chrome and Edge (haven't tested other browsers)</p>
  
  <p>Example of the problem: <a href="https://stackblitz.com/edit/angular-xgyutl" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-xgyutl</a></p>
  
  <p>Is this a bug in @angular/material or am I doing something wrong? If so, is there any way to make sure the ripple never fires without also firing the  click handler?</p>