Custom font with Material Symbols: icons not centered

General discussion
1

When I create a custom font with Noto Sans and Material Symbols, the icons are smaller than intended and not centered. It’s possible that the centering issue is merely a consequence of the sizing issue.

I’m using these icons:

Specifically “MaterialSymbolsRounded[FILL,GRAD,opsz,wght]”

Screenshot with original Montserrat 14, using LV_SYMBOL_DIRECTORY and LV_SYMBOL_IMAGE:
image

With Material Icons and Noto font using “folder” and “image” icons:
image

Reference: Material Symbols and Icons - Google Fonts

The attached zip file contains font_gen.sh which generates the fonts. It also has a slightly modified built_in_font_gen.py
To run it, you have to download the .ttf file above and rename it to MaterialSymbolsRounded.ttf
font issue.zip (349.7 KB)

Update: I also tested the older font (Material Icons instead of Material Style) and it has the same issue:
image

Layout debug rendering:
image

“dump” font example. You’ll also find that it’s 12px high:

image
image567×563 24.7 KB

Debug data for above character (60029 / 0xea7d):
60029 debug.txt (2.9 KB)

2

@kisvegabor Should I open an issue for this at lv_font_conv ?
I’m willing to put a bounty on it to get a fix.

Sidenote: If it can be fixed, would you consider making MaterialSymbols the standard for icons in LVGL? It would give users a lot more freedom in adding more icons as AwesomeFont charges 120$/year + tax and the Pro icons are likely not allowed in GPL-licensed projects (“distributing” is not allowed and it’s not clear what that means).

3

I opened an issue here and put a bounty on it: