Implement the new "material symbols" instead of icons

[T-Dynamos]

Description of the Feature

Ref: https://m3.material.io/styles/icons/overview#1041f799-bd29-4ec5-93a5-b9ac5e060b73

Click to view difference in icons

left side old, right side new symbols

Plan to implement

1. Remove current material font, use Material_Symbols_Outlined-24-400-0_0.ttf and Material_Symbols_Outlined-24-400-1_0.ttf (normal and filled) from materialsymbols-python which means we will be using two seperate fonts for filled and normal style.

Note: This will increase kivymd's size by 500KB as current font is size is 1.3MB and size of filled and normal font summed up is 1.8MB.

2. In some cases user may require to use another values of <FONT_TYPE>-<OPTICAL_SIZE>-<WEIGHT>-<FILL>_<GRAD>.ttf in that case user can specify a font dir where kivymd will look up for other font types. In this case we may want to add something like font_options (a dict) to MDIcon

Feel free to improve implementation plan

[HeaTTheatR]

We can use custom fonts as follows:

from kivy.core.text import LabelBase
from kivy.lang import Builder
from kivy.metrics import sp

from kivymd.app import MDApp

KV = '''
MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    MDIcon:
        icon: "music_video"
        theme_font_name: "Custom"
        font_name: "MaterialSymbols"
        pos_hint: {"center_x": .5, "center_y": .58}

    MDButton:
        pos_hint: {"center_x": .5, "center_y": .47}

        MDButtonIcon:
            icon: "music_video"
            theme_font_name: "Custom"
            font_name: "MaterialSymbols"

        MDButtonText:
            text: "Elevated"
'''


class Example(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"

        LabelBase.register(
            name="MaterialSymbols",
            fn_regular="Material_Symbols_Outlined-20-200-1_200.ttf",
        )

        self.theme_cls.font_styles["MaterialSymbols"] = {
            "large": {
                "line-height": 1.64,
                "font-name": "MaterialSymbols",
                "font-size": sp(57),
            },
            "medium": {
                "line-height": 1.52,
                "font-name": "MaterialSymbols",
                "font-size": sp(45),
            },
            "small": {
                "line-height": 1.44,
                "font-name": "MaterialSymbols",
                "font-size": sp(36),
            },
        }

        return Builder.load_string(KV)


Example().run()

https://kivymd.readthedocs.io/en/latest/components/label/#mdicon-with-a-custom-font-icon

[T-Dynamos]

@HeaTTheatR Icon definations are different.

[HeaTTheatR]

Yes, I know

[T-Dynamos]

Oh I just learnt that you don't need codepoints for Material Symbols you can just simply type the name. So is there still need to implement it or we stick with current one?

[lightsun12]

Please, I need help, am a new beginner in kivymd , I i tried importing MDToolbar from kivymd.uix.toolbar, but i keep on getting an error massages that says kivymd.uix.toolbar is not a module in kivymd, please help, i have also install the the latest version kivymd and kivy, yet the problem cant be solved..thanks

[Enigmatyxx]

"i have also install the the latest version kivymd and kivy"

First of all, be careful not to hijack other people's issues. Also, you're probably on KivyMD 1.1.1 or 1.2.0-dev, which are not the latest versions.

If you have Discord, please join the KivyMD server: https://discord.com/invite/HZfjUKhVrH

Make sure to read #how-to-ask-questions, then ask your question in #support.