Some icons miss fill weight when using Phosphor font

[pebly]

Describe the bug
There is a problem when I try to use fill weight for some icons.

To Reproduce

1. Import Phosphor using the script <script src="https://unpkg.com/phosphor-icons"></script>.
2. Some icons would not render, for example:
   • <i class="ph-text-bolder-fill"></i>
   • <i class="ph-text-h-fill"></i>

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 98.0.4758.102

Additional context
I didn't try to render all the icons. Extensive research and debugging may be needed to find all the icons that don't render when using the Phosphor by the font.

[rektdeckard]

Thanks for the report. I've done some digging, and it looks like we are overflowing the Unicode Private Use Area range in our icon font, and the broken glyphs all happen to align with the codepoints for diacritics, non-printing characters, and other special characters that are not displayed correctly. For visibility, the broken icons as best I can tell are:

Invisible or non-printing

ph-television-simple-fill
ph-tennis-ball-fill
ph-terminal-fill
ph-terminal-window-fill
ph-test-tube-fill
ph-text-aa-fill
ph-text-align-center-fill
ph-text-align-justify-fill
ph-text-align-left-fill
ph-text-align-right-fill
ph-text-bolder-fill
ph-text-h-fill
ph-text-h-five-fill
ph-text-h-four-fill
ph-text-h-one-fill
ph-text-h-six-fill

Offset

ph-tiktok-logo-fill
ph-timer-fill
ph-toggle-left-fill
ph-toggle-right-fill
ph-toilet-fill
ph-toilet-paper-fill
ph-tote-fill
ph-tote-simple-fill
ph-trademark-registered-fill
ph-traffic-cone-fill
ph-traffic-sign-fill
ph-traffic-signal-fill
ph-train-fill

We'll work on a fix, probably by shifting the entire fill weight to another Unicode region.

[pebly]

That's great, thank you for the response. As a designer myself I love your work with Phosphor!

[rektdeckard]

This is fixed with phosphor-icons/homepage#221 and is live in @phosphor-icons/web@^2.0.0, the new vanilla JS package 👍