How to edit tabview buttons to be have icon with text below

How-to
1

Description

I’m design a page where i’ve a tabview on the left, with 3 tabs, and some widgets on the right.
What i’m trying to do is to edit the tab button, to have an image with a decal below

What MCU/Processor/Board and compiler are you using?

I’m using an Makerfabs ESP32S335D and Arduino Ide

What LVGL version are you using?

9.1.0

What do you want to achieve?

I want to edit the tab buttons, from a standard label , like the following
lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
to something where i can change the “Tab 1” label with an icon with a small text

This is what i want to achive, the example provided above, is the standard one, doesn’t need a screenshot .

image
image734×431 69.3 KB

What have you tried so far?

I’ve started from the example : lv_example_tabview_2, trying to change the string “Tab 1” with a label, but doesn’t works
I’ve tryed also to use the lv_imgfont_create , but nothing , i see just strange chars.

Code to reproduce

This is basically the example provided by the library, that i’m trying to modify for my purpose

void lv_example_tabview_2(void)
{
    /*Create a Tab view object*/
    lv_obj_t * tabview;
    tabview = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 80);

    lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);

    lv_obj_t * tab_btns = lv_tabview_get_tab_btns(tabview);
    lv_obj_set_style_bg_color(tab_btns, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
    lv_obj_set_style_text_color(tab_btns, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);
    lv_obj_set_style_border_side(tab_btns, LV_BORDER_SIDE_RIGHT, LV_PART_ITEMS | LV_STATE_CHECKED);

    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Process");
    lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Configuration");
    lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tools");

    lv_obj_set_style_bg_color(tab2, lv_palette_lighten(LV_PALETTE_AMBER, 3), 0);
    lv_obj_set_style_bg_opa(tab2, LV_OPA_COVER, 0);

   /*checkboxes and other stuff to add here*/

    lv_obj_clear_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.