Icon

The icon UI component is used to display standard icon images (“delete”, “home”, and “apps”) or images coming from a custom file (such as PNG, JPG, and Edje) in icon contexts. The icon component inherits from the image component, which means that image functions can be used on icon objects. For more information, see the Icon API.

This feature is supported in mobile applications only.

In the following cases, use an icon instead of an image:

  • You need a thumbnail version of an original image.
  • You need freedesktop.org-provided icon images.
  • You need theme-provided icon images (Edje groups).

Basic Usage

To use an icon component in your application:

  1. Add an icon with the elm_icon_add() function:

    Evas_Object *icon;
    
    icon = elm_icon_add(parent);
    
  2. Set an image to the icon.

    To set a standard icon from freedesktop.org, use the elm_icon_standard_set() function:

    Evas_Object *icon;
    Evas_Object *parent;
    
    icon = elm_icon_add(parent);
    elm_icon_standard_set(icon, "Home");
    
  3. Register the callback functions.

To change the image file:

  • You can use an image in the file system (for example, /tmp/Home.png):

    elm_image_file_set(icon, "/tmp/Home.png", NULL);
    

    You can also use a group in an Edje file (for example, /tmp/Home.edj):

    elm_image_file_set(icon, "/tmp/Home.edj", "elm/icon/Home/default");
    
  • You can generate and use a thumbnail:

    elm_icon_thumb_set(icon, "/tmp/Home.png", NULL);
    

    The elm_icon_thumb_set() function sets the file in the icon and enables the use of a cached thumbnail, if it already exists. Otherwise, it creates a new thumbnail and caches it for future use. The Ethumb library support is required for the thumbnail usage.

The following example shows a simple use case of the icon component.

Example: Icon use case

Icon

Evas_Object *win;
Evas_Object *conf;
Evas_Object *nf;
Evas_Object *box;
Evas_Object icon;
Elm_Object_Item *nf_it;

/* Starting right after the basic EFL UI layout code */
/* win - conformant - naviframe */

/* Add a box to pack icons */
box = elm_box_add(nf);
elm_object_content_set(nf, box);
evas_object_show(box);
elm_naviframe_item_push(nf, "Icon", NULL, NULL, box, NULL);

icon = elm_icon_add(box);
elm_icon_standard_set(icon, "apps");
evas_object_size_hint_min_set(icon, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
evas_object_show(icon);
elm_box_pack_end(box, icon);

icon = elm_icon_add(box);
elm_icon_standard_set(icon, "home");
evas_object_size_hint_min_set(icon, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
evas_object_show(icon);
elm_box_pack_end(box, icon);

icon = elm_icon_add(box);
elm_icon_standard_set(icon, "clock");
evas_object_size_hint_min_set(icon, ELM_SCALE_SIZE(50), ELM_SCALE_SIZE(50));
evas_object_show(icon);
elm_box_pack_end(box, icon);

Standard Icons

Table: Icon styles

Style Sample
apps apps
arrow_down arrow_down
arrow_left arrow_left
arrow_right arrow_right
arrow_up arrow_up
chat chat
clock clock
close close
delete delete
edit edit
file file
folder folder
home home
no_photo no_photo
refresh refresh
media_player/forward media_player/forward
media_player/info media_player/info
media_player/next media_player/next
media_player/pause media_player/pause
media_player/play media_player/play
media_player/prev media_player/prev
media_player/rewind media_player/rewind
media_player/stop media_player/stop
menu/apps menu/apps
menu/arrow_down menu/arrow_down
menu/arrow_left menu/arrow_left
menu/arrow_right menu/arrow_right
menu/arrow_up menu/arrow_up
menu/chat menu/chat
menu/clock menu/clock
menu/close menu/close
menu/delete menu/delete
menu/edit menu/edit
menu/file menu/file
menu/folder menu/folder
menu/home menu/home
menu/refresh menu/refresh
photo/no_photo photo/no_photo
toolbar/apps toolbar/apps
toolbar/arrow_down toolbar/arrow_down
toolbar/arrow_left toolbar/arrow_left
toolbar/arrow_right toolbar/arrow_right
toolbar/arrow_up toolbar/arrow_up
toolbar/chat toolbar/chat
toolbar/clock toolbar/clock
toolbar/close toolbar/close
toolbar/delete toolbar/delete
toolbar/edit toolbar/edit
toolbar/file toolbar/file
toolbar/folder toolbar/folder
toolbar/home toolbar/home
toolbar/more_menu toolbar/more_menu
toolbar/refresh toolbar/refresh

Callbacks

You can register callback functions connected to the following signals for an icon object.

Table: Icon callback signals

Signal Description event_info
thumb,done The elm_icon_thumb_set() function is completed with success. NULL
thumb,error The elm_icon_thumb_set() function fails. NULL

Note
The signal list in the API reference can be more extensive, but only the above signals are actually supported in Tizen.

Note
Except as noted, this content is licensed under LGPLv2.1+.

  • Dependencies
    • Tizen 2.4 and Higher for Mobile