Clickable icon inside md-button

Question

Is there a way to include a clickable icon inside a <md-button> without resizing the <md-button> to full width.

In my case, I want to add a close icon on the right of my buttons, and when the user click on this icon (which is inside the button), an action will be made, but not the one associated to the button.

<md-button ng-click="customFilter('global')" class="md-raised md-primary">
    Global<md-icon md-svg-src='style/images/icons/ic_close_24px.svg'  
    style="color: red; width: 5%; height: 5%"></md-icon>
</md-button>

This add the icon inside the button, but the button takes then the full width.

Ideally, the highlightning would differ between the button and the icon :hover but that's not my concern yet.

Answer 1

Yes you can get this functionality. For styling your md-icon use "vw", this will make sure your icon gets width according to viewport. 1vw = 1% of viewport width

Read more about vw here

Update your code as below

<md-button ng-click="customFilter('global')" class="md-raised md-primary">
    Global
   <md-icon md-svg-src='style/images/icons/ic_close_24px.svg'  
       ng-click="action($event)" style="width:1.5vw"
   </md-icon>
</md-button>

Inside your controller you need to stop md-icon click event from propagating to parent md-button.

$scope.action = function($event){
  //do your action 
  $event.preventDefault();
  $event.stopPropagation();
}