CODEWITHSUNDEEP
angularjsangular-material
Arpit Kumar
Arpit Kumar

Reputation: 2249

how to change icon in button on click with Angular Js

I have the following code:

<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()">
     <md-icon><i class="material-icons">menu</i></md-icon>
</md-button>

As you can see, inside md-button tag I have md-icon which contains an i element. I want to change the i tag when I click the button. This icon should change back when I click it again. Simply, I want a toggle effect with two icons and I want to achieve this using Angularjs.

Upvotes: 2

Views: 12779

Answers (4)

szista
szista

Reputation: 21

You can use ng-switch, like with password redaction:

<md-button ng-switch="vm.isPasswordVisible" ng-click="vm.isPasswordVisible=!vm.isPasswordVisible" ng-class="md-icon-button">
  <md-icon ng-switch-when="false" md-font-library="material-icons"> visibility_off </md-icon>
  <md-icon ng-switch-when="true" md-font-library="material-icons"> visibility </md-icon>
</md-button>

Upvotes: 2

Rakesh Chand
Rakesh Chand

Reputation: 3113

Use a flag value set it to true/false and after clicking on the button change the value accordingly and use following code.

<md-button class="md-primary md-raised" ng-click="openLeftMenu()">
   <md-icon md-font-icon ng-class="
           {'zmdi zmdi-upload': vm.flag, 
            'zmdi zmdi-code': !vm.flag
            }"></md-icon>
</md-button>

Upvotes: 0

Zeokav
Zeokav

Reputation: 1703

You can use a toggle to do this and use the ng-class directive to select class depending on the toggle. Here's how you'd do it-

<div ng-init="icon='class1'">
  <md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="openLeftMenu()">
     <md-icon>
       <i ng-class="icon">menu</i>
     </md-icon>
  </md-button>
</div>

In your openLeftMenu() function, handle the classes on click.

function openLeftMenu() {
  ...
  if(icon==='class1'){
    icon = 'class2';
  } else {
    icon = 'class1';
  }
  ...
}

Here class1 and class2 are your icon classes.

Upvotes: 0

Weedoze
Weedoze

Reputation: 13953

You can use the ng-class directive

CODE

<md-button class="md-icon-button" aria-label="Favorite" hide-gt-sm ng-click="toggleButton()">
     <md-icon><i ng-class="{'material-icons' : toggle, 'material-icons2' : !toggle}">menu</i></md-icon>
</md-button>

CONTROLLER

$scope.toggleButton = function(){
    $scope.toggle = !$scope.toggle;
}

Upvotes: 1

Related Questions