Setting icons to kendo ui tabstrip tabs instead of text?

Question

I am wanting to just display an icon instead of using text on the tabstrip tabs (the titles of the tab, not the content that pops up when you press the tab).

I have this tabstrip:

$('#filterTabStrip').kendoTabStrip({
                        //animation: false,
                        collapsible: true,
                        dataTextField: 'text',
                        dataImageUrlField: 'imageUrl',
                        dataContentField: 'content',
                        dataSource: [
                            {
                                text: 'Users',
                                //imageUrl: $('#user_tab_image').html(),
                                content: $('#user_filter_template').html()
                            },
                            {
                                text: 'Location',
                                //imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#location")}'
                                content: $('#location_filter_template').html()
                            },
                            {
                                text: 'Description',
                                //imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/action-sprite/svg/symbols.svg#description")}'
                                content: $('#description_filter_template').html()
                            },
                            {
                                text: 'Type',
                                //imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#picklist")}'
                                content: $('#type_filter_template').html()
                            },
                            {
                                text: 'Custom',
                                //imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#apps")}'
                                content: $('#user_filter_template').html()
                            }
                        ]
                    });

I have attempted to use static resource URL as well as setting the svg image in an html template, then setting the imageURL to that template, but that didn't work either.

I am hoping this is possible. Thank you for any help.

Answer 1

You can probably try to have an empty text for the dataTextField and provide the imageUrl of the icon which needs to show up. Something similar to this might help!