Forum | Appery.io

I have a list item and would like to dynamically change the icon color from the default gray to another color whenever the user taps on that list item.

I can use javascript but I can't figure out a way to change the icon color, because no color option seems available for the icon

Thank you!

Hello!

You may create the other icon (with the different color) and change it, when it is clicked. These posts should be helpful for you:
https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...

Thanks for your help. I've spent over 2 hours with no luck...

I can change the class name in the selected listitem to another icon.

However since I would need to change the icon color rather than the icon type, I created a custom css icon in the style page, and replaced the class name ui-icon-star to ui-icon-custom, with no success.

Any other hint?

In case someone needs this, here's what I did to make it work:

1) defined a custom background in the css stylesheet.
ui-btn-icon-right:after is the default class that needs to be overridden (it may be -left, -top, etc. in your case)

.ui-btn-icon-bookmarked.ui-btn-icon-right:after{
background-color: red !important;
}

2) added the class .ui-btn-icon-bookmarked to the listitem that contains the icon to be updated with the red color

this.className += " ui-btn-icon-bookmarked";

Ask A Peer,

Thank you for the update, glad it works!