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