在AngularJS材质中实现切换按钮的最佳方法

我正在寻找一个简单的解决方案，在AngularJS材质中实现一个带有自定义选中/未选中图标的切换按钮

该功能应与md复选框相同（选择状态为ng模式），但我希望为选中/未选中状态显示我自己的图标。md复选框似乎不支持自定义图标，md按钮缺少ng模型

---

我最好避免实现自定义指令，而只通过css实现。AngularJS材质是否可以实现这一点？

经过一些挖掘之后，目前最好的解决方案似乎是使用md按钮，该按钮允许自定义图标，并通过

ng单击
和
ng类
对其进行扩展，如下所示：



这将处理选择状态。在CSS中，我可以设置所选按钮类的样式

尽管解决方案相当简单，但我认为对于带有自定义图标的切换按钮（或复选框），Angular Material应该提供开箱即用的支持。
您可以定义一个
切换功能来在控制器中创建切换活动，如下所示：

$scope.toggle=function（）{
$scope.variable=！$scope.variable
log（$scope.variable）；
}

html上的按钮：

正确使用所有类型的角材料v1.x


滤器
过滤列表
全部清除

在控制器集中

$scope.filterToggle=false；

var-app=angular.module（'app'，[]）；
app.controller（'CommentController'，函数（$scope）{
$scope.filtertogle=true；
//启动功能。
$scope.StartFunc=函数（）{
$scope.filtertogle=false；
console.log（'in pause function'）；
};
$scope.CallFunc=函数（）{
$scope.filtertogle？$scope.StartFunc（）：$scope.PauseFunc（）；
}
//暂停功能。
$scope.PauseFunc=函数（）{
$scope.filtertogle=true；
console.log（'in pause function'）；
}
})

启动/暂停功能
暂停
弹箭
解释你的建议/答案通常被认为是一种很好的形式。仅代码的答案可能会令人惊讶地缺乏信息，即使它们在技术上是正确的。不确定原因，但ng click=“selected=！selected”对我不起作用，在我的控制器中实现toggle（）函数确实起作用。