Forum | Appery.io

Hi,
is it possible to change or delete icon on mobilelist?

Hi Michael,

Yes, you have to change "Class Name" property in List Component properties. For example, replace it with "my-custom-list".

To make icons in mobilelist disappear create Custom CSS with following rule:
code.my-custom-list li span.ui-icon
{
display: none !important;
}/code
To change icon create Custom CSS with following rule
code.my-custom-list li span.ui-icon
{
background-image: url("app-icon-email.png") !important;
}/code
Another way is to select list item, click "More properties" on Properties panel and add "data-icon" property with value star, plus, home etc:

Here is full list of icons:
Bars - data-icon="bars"
Edit - data-icon="edit"
Left arrow - data-icon="arrow-l"
Right arrow - data-icon="arrow-r"
Up arrow - data-icon="arrow-u"
Down arrow - data-icon="arrow-d"
Delete - data-icon="delete"
Plus - data-icon="plus"
Minus - data-icon="minus"
Check - data-icon="check"
Gear - data-icon="gear"
Refresh - data-icon="refresh"
Forward - data-icon="forward"
Back - data-icon="back"
Grid - data-icon="grid"
Star - data-icon="star"
Alert - data-icon="alert"
Info - data-icon="info"
Home - data-icon="home"
Search - data-icon="search"

You can find more here: http://jquerymobile.com/test/docs/but...

Also there is a long blue list of available icons (look at the middle of the web page):
http://jquerymobile.com/test/docs/lis...

To hide icon specify data-icon="false".

The last method specified in the answer above, to click "More properties" on Properties panel and add "data-icon" property with value star, plus, home etc

Can you verify if this actually works? I cannot seem to get it to work, not sure if I need to call a refresh from somewhere or something else.

Hello!

I've tested and it's working. Please try to delete and add 'data-icon' again. Make sure you've pressed Save Options.

I dont want to delete and recreate, I've got multiple labels within the list item (cell) and a lot of related code that I dont want to type in

Anyway thanks for your help.

You shouldn't delete List item, just 'data-icon' in More Properties and create it again.

Yep, tried that multiple times, doesnt work for me. Still shows the same right arrow icon on list items.

Could you please share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a I'll take a look.

Ok take a look. The list populates dynamically from a service response so not sure if that is the problem.

Have you shared the app? Tell me its name and page with problem please.