how to change icon in button on click with Angular Js
Solution 1
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>
Solution 2
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;
}
Arpit Kumar
let me = { _id 😍: 'apmeena' name 📛: 'Arpit Kumar', gender 💪: 'M', email 📧: 'arp*********@gmail.com', mobile 📱: '74******12', isSingle 👦: false, inLove 💑: true, isMorningBird 🐦: true, isNightOwl 🐥: false, favouriteProgrammingLanguage 💻: 'JavaScript', isHappy 🙋: true, inspiredBy 🔋: ['grandfather', 'father'], isCreative 🎨: true, hardWorker 🔨: true, loveCleanCode 🌴: true, believeInShowOff 📷: false, emotional 😟: true, hungryForProgrammingChallenge 🐈: true, loveSleep 😴: true, loveNation 🚩: true, believeInGod ✴: true, believeInAlien 👿: true, isGoodLooking 🌹: undefined, loveAnimation 🎠: true } 😍 😗 😀
Updated on June 13, 2022Comments
-
Arpit Kumar almost 2 years
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 havemd-icon
which contains ani
element. I want to change thei
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.