Modals not rendering maximize/minimize glyphs

[ahacking]

Environment

Make sure you are using the latest LiveView and Dashboard versions before continuing.

• Elixir version (elixir -v): 1.14.2
• Phoenix version (mix deps): 1.7.2
• Phoenix LiveView version (mix deps): 0.18.18
• Phoenix Dashboard version (mix deps): 0.7.2
• Operating system: Linux
• Browsers you attempted to reproduce this bug on (the more the merrier): Firefox 1110.0.1, Android Chrome

Actual behavior

The Maximize and minimize glyph is not rendered in modal title.

It appears to be an issue with the inline font not providing the required code points U+1F5D6 and U+1F5D7 used here:

phoenix_live_dashboard/lib/phoenix/live_dashboard/info/modal_component.ex

Line 34 in 9140f56

🗖︎

and here:

phoenix_live_dashboard/lib/phoenix/live_dashboard/info/modal_component.ex

Line 37 in 9140f56

🗗︎

Expected behavior

Maximize/Minimize glyph is rendered by the browser.

[josevalim]

@fmterrorf can you plaese give us a hand here? The icons may not have been committed as part of #367? Do you remember?

[josevalim]

Ah, it seems we are missing the font with those Unicode characters. So we need to address it or revert it. :(

[fmterrorf]

@fmterrorf can you plaese give us a hand here? The icons may not have been committed as part of #367? Do you remember?

I got it from here https://stackoverflow.com/a/60570109. I can have a look on this. Maybe we can just use an SVG like what's done here

phoenix_live_dashboard/lib/phoenix/live_dashboard/page_builder.ex

Line 351 in d183b63

<svg class="hint-icon" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">

[josevalim]

@fmterrorf ah, the SO link is great. I will just use minus and square for now. Thank you!