material icon set renders invalid icons

[kgilmer]

Environment:

Ubuntu 20.04

i3-gaps

$ i3 --version
i3 version 4.19 (2020-11-15) © 2009 Michael Stapelberg and contributors

i3status-rs

$ ~/bin/i3status-rs --version
i3status-rs 0.15.0 (commit 4318a37 2021-02-21)

Material font installed:

$ apt list --installed | grep material
fonts-materialdesignicons-webfont/focal,now 1.6.50-3regolith3 amd64 [installed]

i3status-rs config:

theme = "native"
icons = "material"

[[block]]
block = "time"
interval = 60
format = "%a %d/%m %R"

Steps to reproduce:

1. build i3status-rs from source, install as directed on wiki.

Expected behavior: material icons show on bar
Actual behavior:

FWIW the FontAwesome icon setting does not produce the "unknown unicode" charaters but also doesn't seem to map to the intended glyphs.

Other notes

$ fc-list | grep -i material
/usr/share/fonts/truetype/materialdesignicons-webfont/materialdesignicons-webfont.ttf: Material Design Icons:style=Regular

FWIW I believe that the mappings from character code to icon have changed in the material design icon font in version 1.6 of that package (debian).

I checked this issue but nothing there resulted in working behavior on my system

[GladOSkar]

I don't think your materialdesignicons-webfont is FontAwesome/NerdFont compatible? Have you tried a FontAwesome or NerdFont font? They should also have the material icons, esp. the NerdFont fonts.

[MaxVerevkin]

I tried both FontAwesome and NerdFont but I get the same result as the author. Also I checked src/icons.rs and some icons are just missing.

[GladOSkar]

Interesting. I'm using the FuraCode Nerd Font and both awesome and material icon sets work fine with the clock icon:

But you're right that some of the networking icons are missing then, but that's another issue.

[MaxVerevkin]

With this font config:

    font pango:FuraCode Nerd Font 10

I get this

I use void linux and I have nerd-fonts-2.1.0_3 installed.

awesome5 for reference:

    font pango:DejaVu Sans Mono, Font Awesome 5 Free 10

[GladOSkar]

Weird. I just downloaded the latest version from the official source (which has been renamed back to Fira i think) and that works:

font pango:FiraCode Nerd Font 10

[MaxVerevkin]

Have you done any modifications to fontconfig? it still doesn't work for me.

❯ fc-list | grep -i fira
/usr/share/fonts/TTF/Fira Code Regular Nerd Font Complete.ttf: FiraCode Nerd Font:style=Regular

[MaxVerevkin]

This override works

cpu = " <span size='large' stretch='ultraexpanded' font_family='NotoSans Nerd Font'>\uf9c4</span> "

[GladOSkar]

Have you done any modifications to fontconfig? it still doesn't work for me.

❯ fc-list | grep -i fira
/usr/share/fonts/TTF/Fira Code Regular Nerd Font Complete.ttf: FiraCode Nerd Font:style=Regular

Nope, just dropped the file in .fonts and that's it:

% fc-list | grep -i fira
/home/oskar/.fonts/Fira Code Regular Nerd Font Complete.ttf: FiraCode Nerd Font:style=Regular

[MaxVerevkin]

In src/icons.rs we have

        "time" => " \u{e192} ",

But https://www.nerdfonts.com/cheat-sheet doesnt give me that icon when I search for "clock"

[MaxVerevkin]

In fact, https://www.nerdfonts.com/cheat-sheet also works as a reverse search, and it can't find anything for "e192"

[GladOSkar]

Yeah i just saw the same thing. Gotta say i'm stumped

[MaxVerevkin]

From #57:

Note: This requires a patched version of MaterialIcons-Regular.ttf as offered by Google to include \u{0020} (space), set a descent and lower all glyphs to properly align.

[GladOSkar]

Oh darn it i just realized i do have a material icons font installed -.-

$ fc-list | grep Material   
/home/oskar/.fonts/MaterialIcons-Regular-for-inline.ttf: Material Icons:style=Regular

[MaxVerevkin]

So... Maybe we should have two separate material icons sets?

[GladOSkar]

I don't know, does NerdFont actually include them? If not then the current implementation is probably correct.

I presume @kgilmer's (and yours for that matter) issue is still that it's not the right material font on their system. As stated in the theming & icons documentation section on icon sets the material icon set requires a sepcific patched font that is available here.

It also says to specify that font in your bar config, but for me it works without that as a fallback for those codepoints.

[MaxVerevkin]

does NerdFont actually include them?

Their home page says yes.

[GladOSkar]

Interesting. I guess if we want to make use of them then we'd need another mapping, yes

[MaxVerevkin]

issue is still that it's not the right material font on their system

Yeah, the patched font works. Sort of. Instead of memory icon i have a stormy cloud. And yes, many icons are just missing. But that's the other issue. I would consider adding a new icon set for "the other material" icons.

[ammgws]

Hmm I never noticed we are dependent on some random gist for the material icons... I wonder how many people are actually using it.

I don't understand the reason why the official font can't be used (vertical spacing issues??), but if there's no actual problem then I feel like we should use the official font by default.

[MaxVerevkin]

I don't understand the reason why the official font can't be used (vertical spacing issues??)

There are some horizontal spacing issues. But there is a solution: wrap each icon into pango's span like this:

music = " <span size='medium' font_family='NotoSans Nerd Font'>\uf886</span> "

And I think this could be a global configuration option:

icons_style = "size='medium' font_family='NotoSans Nerd Font'"

But most of the icons just work.

[MaxVerevkin]

cpu = " \uf9c4 "

gives

cpu = " <span size='medium' font_family='NotoSans Nerd Font'>\uf9c4</span> "

gives

[ammgws]

Looks similar to what was proposed in #981

[MaxVerevkin]

Looks similar to what was proposed in #981

Yeah, I see, that's exactly the same.

[kgilmer]

I didn't expect such a lively discussion, but happy to see it! 😄

I was not using Nerd Fonts @GladOSkar and so I tried doing that by performing the following steps:

1. install Code New Roman Nerd Font from the NerdFonts patched-fonts directory into ~/.fonts/CodeNewRoman/ directory. (I wanted to use a font not already installed on my system to avoid any potential conflicts)
2. Update the font cache with fc-cache -f -v (also did w/ sudo mistakenly)
3. Verify the font name and installation with fc-match:

~$ fc-match "Code New Roman Nerd Font"
Code New Roman Nerd Font Complete.otf: "CodeNewRoman Nerd Font" "Book"

4. Update the font specification in my i3-gaps config file:

font  pango:DejaVu Sans Mono 13, Code New Roman Nerd Font 13

5. Reload i3 (then re-login after that didn't work)

Result:

Is there something I've missed or bungled here? Any other tips or troubleshooting suggestions?

Additional Info

$ fc-list | grep -i CodeNew
/home/kgilmer/.fonts/CodeNewRoman/Bold/complete/Code New Roman Bold Nerd Font Complete Mono Windows Compatible.otf: CodeNewRoman NF:style=Bold
/home/kgilmer/.fonts/CodeNewRoman/Italic/complete/Code New Roman Italic Nerd Font Complete.otf: CodeNewRoman Nerd Font:style=Italic
/home/kgilmer/.fonts/CodeNewRoman/Regular/complete/Code New Roman Nerd Font Complete Mono Windows Compatible.otf: CodeNewRoman NF:style=Book
/home/kgilmer/.fonts/CodeNewRoman/Regular/complete/Code New Roman Nerd Font Complete Windows Compatible.otf: CodeNewRoman NF:style=Book
/home/kgilmer/.fonts/CodeNewRoman/Regular/complete/Code New Roman Nerd Font Complete.otf: CodeNewRoman Nerd Font:style=Book
/home/kgilmer/.fonts/CodeNewRoman/Regular/complete/Code New Roman Nerd Font Complete Mono.otf: CodeNewRoman Nerd Font Mono:style=Book
/home/kgilmer/.fonts/CodeNewRoman/Italic/complete/Code New Roman Italic Nerd Font Complete Mono.otf: CodeNewRoman Nerd Font Mono:style=Italic
/home/kgilmer/.fonts/CodeNewRoman/Italic/complete/Code New Roman Italic Nerd Font Complete Mono Windows Compatible.otf: CodeNewRoman NF:style=Italic
/home/kgilmer/.fonts/CodeNewRoman/Bold/complete/Code New Roman Bold Nerd Font Complete Mono.otf: CodeNewRoman Nerd Font Mono:style=Bold
/home/kgilmer/.fonts/CodeNewRoman/Bold/complete/Code New Roman Bold Nerd Font Complete.otf: CodeNewRoman Nerd Font:style=Bold
/home/kgilmer/.fonts/CodeNewRoman/Bold/complete/Code New Roman Bold Nerd Font Complete Windows Compatible.otf: CodeNewRoman NF:style=Bold
/home/kgilmer/.fonts/CodeNewRoman/Italic/complete/Code New Roman Italic Nerd Font Complete Windows Compatible.otf: CodeNewRoman NF:style=Italic

[MaxVerevkin]

@kgilmer You don't need Nerd Fonts to use material icon set, but you need a specific font.

#1095 Adds a new material icon set that should work with any font form Nerd Fonts.

[ammgws]

So to summarise, our "material" icon setting is useless when using the official Google Material font or the aggregated Nerd Fonts, and only works with that random patched font that's only available in that gist?

"works" meaning the mappings point to the intended icons

[GladOSkar]

I think so, yes. I don't know if that random patched font was based on some official mapping that we don't know about though.

[ammgws]

I am leaning towards replacing it with the official Google Material font.

Looks like that PR was made around 2017 so can check if the mappings changed between then and now.

[GladOSkar]

I wonder how many people are using that feature since it would break for all of them in that case of course

[ammgws]

Yes it would, perhaps it could be left as "material-legacy" or something, but having it as the "main" one seems wrong. Even more so if the official font has undergone changes and the patched one has been left untouched this whole time.

[ammgws]

OK this is getting confusing so I want to try make a comparison table (might take a while to complete).

Google Material Design icons
https://github.com/google/material-design-icons
https://aur.archlinux.org/packages/ttf-material-design-icons/

"MDI" Material Design icons by MaterialDesignIcons.com (annoyingly they don't seem to mention Google anywhere)
https://github.com/Templarian/MaterialDesign
https://aur.archlinux.org/packages/ttf-material-design-icons-extended/

Nerd Fonts which includes MaterialDesignIcons.com, possibly patched. Codepoints are different.
https://github.com/ryanoasis/nerd-fonts/blob/master/readme.md
https://aur.archlinux.org/packages/nerd-fonts-complete/

"Patched" icons from that gist
https://gist.github.com/draoncc/3c20d8d4262892ccd2e227eefeafa8ef/raw/3e6e12c213fba1ec28aaa26430c3606874754c30/MaterialIcons-Regular-for-inline.ttf

Icon	Patched	Google	MDI	NerdFonts
backlight_empty	e1a3	``	``	e38d // nf-weather-moon_new
backlight_full	-	``	e3a6 // brightness_1	e39b // nf-weather-moon_full`
backlight_1	-	``	e3a7 // brightness_2	e3d4 // nf-weather-moon_alt_waxing_gibbous_6
backlight_2	-	``	e3a7 // brightness_2	e3d3 // nf-weather-moon_alt_waxing_gibbous_5
backlight_3	-	``	e3a7 // brightness_2	e3d2 // nf-weather-moon_alt_waxing_gibbous_4
backlight_4	-	``	e3a7 // brightness_2	e3d1 // nf-weather-moon_alt_waxing_gibbous_3
backlight_5	-	``	e3a7 // brightness_2	e3d0 // nf-weather-moon_alt_waxing_gibbous_2
backlight_6	-	``	e3a7 // brightness_2	e3cf // nf-weather-moon_alt_waxing_gibbous_1
backlight_7	-	``	e3a8 // brightness_3	e3ce // nf-weather-moon_alt_first_quarter
backlight_8	-	``	e3a8 // brightness_3	e3cd // nf-weather-moon_alt_waxing_crescent_6
backlight_9	-	``	e3a8 // brightness_3	e3cc // nf-weather-moon_alt_waxing_crescent_5
backlight_10	-	``	e3a8 // brightness_3	e3cb // nf-weather-moon_alt_waxing_crescent_4
backlight_11	-	``	e3a8 // brightness_3	e3ca // nf-weather-moon_alt_waxing_crescent_3
backlight_12	-	``	e3a8 // brightness_3	e3c9 // nf-weather-moon_alt_waxing_crescent_2
backlight_13	-	``	e3a8 // brightness_3	e3c8 // nf-weather-moon_alt_waxing_crescent_1
bat	-	``	``	-
bat_charging	e1a3	e1a3 // battery_charging_full	``	f583 // nf-mdi-battery_charging
bat_discharging	e19c	e19c // battery_alert	``	f57d // nf-mdi-battery_50
bat_empty	e19c	e19c // battery_alert	``	f58d // nf-mdi-battery_outline
bat_full	e1a4	e1a4 // battery_full	f0079 // mdi-battery	f578 // nf-mdi-battery
bat_half	e1a5	e1a5 // battery_std	f007e // mdi-battery-50	f57d // nf-mdi-battery_50
bat_not_available	-	e1a6 // battery_unknown	f125d // mdi-battery-off	-
bat_quarter	e1a5	e1a5 // battery_std	f007a // mdi-battery-20	f57a// nf-mdi-battery_20
bat_three_quarters	e1a5	``	f0080 // mdi-battery-70	f57f // nf-mdi-battery_70
bell	e7f4	e7f4 // notifications	f009a // mdi-bell	f599 // nf-mdi-bell
bell-slash	e7f8	e7f8 // notifications_paused	f009b // mdi-bell-off	f59a // nf-mdi-bell_off
bluetooth	e1a7	e1a7 // bluetooth	f00af // mdi-bluetooth	f5ae // nf-mdi-bluetooth
calendar	e935	e935 // calendar_today	f00ed // mdi-calendar	f5ec // nf-mdi-calendar
cogs	e8b8	e8b8 // settings	f08d6 // mdi-cogs	f992 // nf-mdi-settings
cpu	e640	e640 // network_check	``	f9c4 // nf-mdi-speedometer
disk_drive	e1db	e1db // storage	f02ca // mdi-harddisk	f7c9 // nf-mdi-harddisk
docker	e532	e532 // directions_boat	f0868 // mdi-docker	f308 // nf-linux-docker
github	e86f	e86f // code	f02a4 // mdi-github	f7a3 // nf-mdi-github_circle
gpu	e333	e333 // tv	``	f878 // nf-mdi-monitor
headphones	e60f	e60f // bluetooth_audio	``	f7ca // nf-mdi-headphones
joystick	e30f	e30f // gamepad	``	f796 // nf-mdi-gamepad_variant
keyboard	e312	e312 // keyboard	``	f80b // nf-mdi-keyboard
mail	e0be	e0be // email	``	f6ed // nf-mdi-email
memory_mem	e322	e322 // memory	``	f85a // nf-mdi-memory
memory_swap	e8d4	e8d4 // swap_horiz	``	f7c9 // nf-mdi-harddisk
mouse	e323	e323 // mouse	``	f87c // nf-mdi-mouse
music	e405	e405 // music_note	``	f886 // nf-mdi-music_note
music_next	e044	e044 // skip_next	``	f9ac // nf-mdi-skip_next
music_pause	e034	e034 // pause	``	f8e3 // nf-mdi-pause
music_play	e037	e037 // play_arrow	``	f909 // nf-mdi-play`
music_prev	e045	e045 // skip_previous	``	f9ad // nf-mdi-skip_previous
net_down	-	e2c0 // cloud_download	``	f6d9 // nf-mdi-download`
net_loopback	LO	``	``	fbe9 // nf-mdi-loop
net_up	-	e2c3 // cloud_upload	``	fa51 // nf-mdi-upload
net_vpn	-	e62f // vpn_lock	``	fa81 // nf-mdi-vpn
net_wired	-	e1e2 // wifi_tethering	``	f6ff // nf-mdi-ethernet
net_wireless	-	e63e // wifi	``	faa8 // nf-mdi-wifi
notification	e7f7	e7f7 // notifications_active	``	f599 // nf-mdi-bell
phone	e324	e324 // phone_android	``	f8f1 // nf-mdi-phone
phone_disconnected	1f4f5	e339 // device_unknown	``	fb57 // nf-mdi-phone_minus
ping	-	e62a // system_update	``	fa1e // nf-mdi-timer_sand
pomodoro	1f345	``	``	e001 // nf-pom-pomodoro_done
resolution	f152	``	``	f792 // nf-mdi-fullscreen
tasks	e8f9	``	``	fac6 // nf-mdi-playlist_check
thermometer	f2c8	e1ff // device_thermostat	``	fa0e // nf-mdi-thermometer
time	e192	e192 // access_time	``	f64f // nf-mdi-clock
toggle_off	e836	e836 // radio_button_off	``	fa21 // nf-mdi-toggle_switch_off
toggle_on	e837	e837 // radio_button_on	``	fa20 // nf-mdi-toggle_switch
update	e8d7	e8d7 // system_update_alt	``	fbae // nf-mdi-update
uptime	e192	e425 // timer	``	f652 // nf-mdi-clock_in
volume_empty	e04e	e04e // volume_mute	``	fa7e // nf-mdi-volume_low
volume_full	e050	e050 // volume_up	``	fa7d // nf-mdi-volume_high
volume_half	e04d	e04d // volume_down	``	fa7f // nf-mdi-volume_medium
volume_muted	e04e e04f	e04f // volume_off	``	f466 // nf-mdi-volume_mute
microphone_empty	-	e02a // mic_none	``	f86d // nf-mdi-microphone_outline
microphone_full	-	e029 // mic	``	f86b // nf-mdi-microphone
microphone_half	-	e029 // mic	``	f86b // nf-mdi-microphone
microphone_muted	-	e02b // mic_off	``	f86c // nf-mdi-microphone_off
weather_clouds	-	e42d // wb_cloudy	f0590 // mdi-weather-cloudy	fa8f // nf-mdi-weather_cloudy
weather_default	-	e42d // wb_cloudy	f0590 // mdi-weather-cloudy	fa8f // nf-mdi-weather_cloudy
weather_rain	-	-	f0596 // mdi-weather-pouring	fa95 // nf-mdi-weather_pouring
weather_snow	-	e430 // wb_sunny	``	fa97 // nf-mdi-weather_snowy
weather_sun	-	-	``	fa98 // nf-mdi-weather_sunny
weather_thunder	-	-	``	e31d // nf-weather-thunderstorm
xrandr	e31e	``	``	f879 // nf-mdi-monitor_multiple

[kgilmer]

I was able to resolve the issue with your help, thank you!

I am using the JetBrains Mono font from NerdFonts. I see that the icons are smaller than the text, is this expected? From screenshots in the readme, I can see the fontawesome-based screenshots appear to have icon and text at roughly the same size... My font specification in i3 config file is pango:JetBrainsMono NF 13.

In any case, thanks again and I won't close the issue as looks like there is work going on in here but you can consider my issue resolved.

[GladOSkar]

@kgilmer that might just be an issue with the jetbrains font. There are a bunch of issues about stuff like that here, like #238. Maybe one of them has something that works for you.

[MaxVerevkin]

@kgilmer You can try to add this in your config:

icons_format = " <span size='large'>{icon}</span> "

[ammgws]

So it turns out the codepoints we have for the material icon are the same for the "patched" font from the gist and the current Google Material font.

As for MDI, the codepoints are different to aggregated Nerd Fonts one. I mapped most of them int he table above, so if someone wants to add materials_mdi to go alongside material_nf then it could be used as a reference.