md按钮内的可点击图标

Question

有没有一种方法可以在<md-button>包含可点击的图标，而无需将<md-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>

这会将图标添加到按钮内部，但是按钮将占据整个宽度。

理想情况下，按钮和图标之间的突出显示会有所不同:hover但这不是我关心的问题。

Answer 1

是的，您可以获得此功能。 要为md-icon设置样式，请使用“ vw”，以确保图标根据视口获得宽度。 1vw =视口宽度的1％

在此处阅读有关大众的更多信息

如下更新代码

<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>

在控制器内部，您需要阻止md-icon click事件传播到父md-button。

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