I have used 2 material icon (add and remove) to add or remove some items in md-list-items. My objective is to hide add icon and show remove icon if user clicks on add. OR if user clicks on remove then add icon will come instead of remove icon. both on click
<i class="material-icons md-avatar-icon add-rm-icon margin-right">add</i>
<i class="material-icons md-avatar-icon add-rm-icon margin-right">remove</i>
Here is another way of doing it.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.add= false;
});/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body ng-app="app" ng-controller="ctrl">
<div class="col-lg-12">
<div class="row">
<a href="#" class="btn btn-primary" ng-click="added = true" ng-show="!added"><i class="material-icons">add</i> Add</a>
<a href="#" class="btn btn-primary" ng-click="added = false" ng-show="added"><i class="material-icons">remove</i> Remove</a>
</div>
<div>
Current State: {{added ? 'Added' : 'Not Added'}}
</div>
</div>
</body>