md-button 内的可点击图标

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%

阅读更多关于大众的信息here

更新您的代码如下

<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();
}

md-button 内的可点击图标

Clickable icon inside md-button

html

javascript

css

angularjs

angular-material