Best way to implement a toggle button in AngularJS Material - angularjs

Question

I am looking for a simple solution to implement a toggle button with a custom selected / unselected icon in AngularJS Material.
The functionality should be identical to the md-checkbox (with ng-model for the selection state), but I want to have my own icon displayed for selected / unselected state. md-checkbox does not seem to support custom icons, and md-button lacks the ng-model.
Preferably I would like to avoid implementing a custom directive and only make this work through css. Is this possible with AngularJS Material?

Answer 1

You can define a toggle function to create toggle activity in your controller, like this:
$scope.toggle = function() {
$scope.variable = !$scope.variable
console.log($scope.variable);
}
Button on the html:
<md-button
ng-click="toggle()"
ng-class="{'active': variable, 'disable': !variable}">

Answer 2

After some digging the best solution currently seems to be using an md-button, which allows custom icons, and extending it with ng-click and ng-class like this:
<md-button ng-click="selected = !selected"
ng-class="{'selected-button' : selected}">
This takes care of the selection state. And in CSS I can then set the styles for the selected-button class
Even though the solution is rather simple, I think there should be an out-of-the-box support from Angular Material for a toggle button (or checkbox) with custom icons.

Answer 3

Properly using all classes of Angular Material v1.x
<md-button class="md-icon-button"
ng-click="filterToggle = !filterToggle"
ng-class="{'md-primary md-raised' : filterToggle}">
<md-tooltip md-direction="bottom">Filter</md-tooltip>
<md-icon ng-hide="filterToggle">filter_list</md-icon>
<md-icon ng-show="filterToggle">clear_all</md-icon>
</md-button>
in controller set
$scope.filterToggle = false;

Answer 4

var app = angular.module('app', []);
app.controller('CommentController', function($scope) {
$scope.filterToggle = true;
//start function.
$scope.StartFunc = function() {
$scope.filterToggle = false;
console.log('in pause function.');
};
$scope.CallFunc = function() {
$scope.filterToggle ? $scope.StartFunc() : $scope.PauseFunc();
}
// pause function.
$scope.PauseFunc = function() {
$scope.filterToggle = true;
console.log('in pause function.');
}
})
<link href="https://material.angularjs.org/1.1.2/angular-material.min.css" rel="stylesheet" />
<script src="https://material.angularjs.org/1.1.2/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="CommentController">
<md-input-container>
<md-button class="md-icon-button md-primary md-raised" ng-click="CallFunc()">
<md-tooltip md-direction="bottom">Start/Pause Func</md-tooltip>
<md-icon ng-hide="filterToggle" style="background-color:grey;width:auto;">pause</md-icon>
<md-icon ng-show="filterToggle" style="background-color:grey;width:auto;">play_arrow</md-icon>
</md-button>
</md-input-container>
</div>
</div>