Change icon on list

[Michael4771079]

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

[Kateryna Grynko]

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".

[Slang]

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.

[Alena Prykhodko]

Hello!

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

[Slang]

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.

[Alena Prykhodko]

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

[Slang]

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

[Alena Prykhodko]

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

[Slang]

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

[Alena Prykhodko]

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