Changing button color or icon dynamically

Ionic Framework ionic-v3
41

Thanks for the response.

That issue seems to be closed. Should I re-open it?

42

It’s closed because it’s already implemented but if you look at the milestone you’ll see that it will land in beta.12, so you’ll have to wait until it’s released.

43

Hi, I’m on Ionic 2.1 and I want to something like this:
<button ion-button icon-only [attr.color]="(followed && watched) ? 'light' : 'dark'" >
In fact it’s working fine in the source-code, it switches between light and dark, but on front-end it’s always in default-color… If I hardcode the color=“light” it’s fine…

Edit: I found out why… the real class setting the button to dark/light is button-md-light and it’s not set when changing the color-attribute… Solution?

44

I’m doing just the same with buttons and dynamic colors, but what happens to me is that the class of the color that changes is not removed, so the button keeps with the first color always:


{{button.text}}

and markup both classes are on “button-md-regular button-outline-md-dark”

45

This solution for using custom colors independently from sass variables works fine. However, there is still the activated state color on android which is evaluated as the primary color one. Is it possible to change it ?

2 Likes
46

Hi can you please elaborate…how can i use name in js file…please.
I want to change the icon based on the condition.
there are different items on the list and each item must contain a different icon based on a condition. How can I do that

47

This took me forever to find since there are very few examples out there for specifically toggling icons. However, I used the Ionic 2 Icons Doc and came up with this:

ts:

class ToggleIcons {
    buttonIcon: string = "home";

    toggleIcon(getIcon: string) {

      if (this.buttonIcon === 'star') {
        this.buttonIcon = "home";
      }
      else if (this.buttonIcon === 'home') {
        this.buttonIcon = "star";
      }
   }
}

html:

<button #myButton ion-button icon-only (click)="toggleIcon()">
    <ion-icon [name]="buttonIcon"></ion-icon>
</button>

See my CodePen as an example.

Hope this helps!

1 Like
48

have tired this one…

Test

49

@gsoulie - Have you tried same scenario with change in ICON with *ngFor in list.

50

Check out this post in my blog :wink: https://buonageek.blogspot.it/2018/02/how-to-dinamically-change-font-text-in.html

52

thanks, this worked for me