title: Disable button event when embedded mat icon is clicked
body: <p>I am having a mat-icon inside a button. Button is having an event defined and mat-icon is having another event defined. When I click on mat-icon, its event is fired along with button event as mat-icon is inside button tag. I don't want button event to be fired when mat-icon is clicked and don't want mat-icon to be fired when button is clicked excluding the mat-icon part in the UI. Here is a snippet of HTML in angular framework.</p>
  
  <pre><code>&lt;button type="button" class="" (click)="someevent"&gt;
              &lt;span &gt;
                Text
              &lt;/span&gt;
              &lt;mat-icon  class='' (click)="differentevent"&gt;
                         delete
              &lt;/mat-icon&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>How to resolve this? I am using Angular and click events are defined in typescript.</p>