KivyMD Tab name containing icons and text

Question

I'm using KivyMD and I'm trying to create a tab name that contains both icons and text in it - but it won't display properly on my screen.

I'm trying to get a tab to have the text: [A] Tab1 (where [A] is the icon). If the icon is called on its own, it displays fine (see second tab in screenshot below). But when it is combined with text it won't show up (it shows a box with an X in it like it's an unrecognised character).

The examples in https://kivymd.readthedocs.io/en/latest/components/tabs/ load the tabs via python, but I want to do it from the .kv file, but I'm obviously not getting my syntax correct and I can't work out how to apply what is being done in those examples.

Here's my code of the different ways I've tried to display it. For simplicity I've put all my code into one place, but in reality it the KV component is in a separate .kv file.

from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen

KV = '''
#:import md_icons kivymd.icon_definitions.md_icons

BoxLayout:
    id: boxcad
    orientation: 'vertical'
    MDToolbar:
        id: toolcad
        title: "Mainscreen"
        md_bg_color: app.theme_cls.primary_color


    BoxLayout:
        id: tabox
        orientation: 'vertical'

        MDTabs:
            id: itemstab

            Tab:
                id: tab1
                name: 'tab1'
                text: "Tab1"

            Tab:
                id: tab2
                name: 'tab2'
                text: 'alpha-a-box'

            Tab:
                id: tab3
                name: 'tab3'
                text: md_icons.get('alpha-a-box')

            Tab:
                id: tab4
                name: 'tab4'
                text: 'alpha-a-box' + 'Tab4'

            Tab:
                id: tab5
                name: 'tab5'
                text: md_icons.get('alpha-a-box') + ' Tab5'

            Tab:
                id: tab6
                name: 'tab6'
                text: md_icons['alpha-a-box'] + ' Tab6'
'''


class MainScreen(Screen):
    pass


class Tab(BoxLayout, MDTabsBase):
    """Class implementing content for a tab."""
    pass


class ExampleApp(MDApp):
    def build(self):
        return Builder.load_string(KV)


ExampleApp().run()

And a screen shot of what I see on screen:

Thank you for your assistance

score 0 · Answer 1 · answered Jan 16 '21 at 05:47

I've managed to work it out - so incase you are having the same problem I was, here's how I did it.

You can use an f-string in the .KV file as it's displayed in the https://kivymd.readthedocs.io/en/latest/components/tabs/ examples. You need to import the md_icons and fonts in the .KV file too.

Here's my final code, with Tab 7 showing the output I was trying to achieve.

from kivy.lang import Builder

from kivymd.app import MDApp

from kivymd.uix.tab import MDTabsBase
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen

KV = '''
#:import md_icons kivymd.icon_definitions.md_icons
#:import fonts kivymd.font_definitions.fonts

BoxLayout:
    id: boxcad
    orientation: 'vertical'
    MDToolbar:
        id: toolcad
        title: "Mainscreen"
        md_bg_color: app.theme_cls.primary_color


    BoxLayout:
        id: tabox
        orientation: 'vertical'

        MDTabs:
            id: itemstab

            Tab:
                id: tab1
                name: 'tab1'
                text: "Tab1"

            Tab:
                id: tab2
                name: 'tab2'
                text: 'alpha-a-box'

            Tab:
                id: tab3
                name: 'tab3'
                text: md_icons.get('alpha-a-box')

            Tab:
                id: tab4
                name: 'tab4'
                text: 'alpha-a-box' + 'Tab4'

            Tab:
                id: tab5
                name: 'tab5'
                text: md_icons.get('alpha-a-box') + ' Tab5'

            Tab:
                id: tab6
                name: 'tab6'
                text: md_icons['alpha-a-box'] + ' Tab6'
            Tab:
                id: tab7
                name: 'tab7'
                text: f"[size=50][font={fonts[-1]['fn_regular']}]{md_icons['alpha-a-box']}[/size][/font] Tab7"
'''


class MainScreen(Screen):
    pass


class Tab(BoxLayout, MDTabsBase):
    """Class implementing content for a tab."""
    pass


class ExampleApp(MDApp):
    def build(self):
        return Builder.load_string(KV)


ExampleApp().run()

KivyMD Tab name containing icons and text

1 Answers1