[Feature Request]: Change Pin Icon

[christian-byrne]

Ref

• Add pin icon to end of title #120.
• [Feature Request]: Change Pin Icon ComfyUI_frontend#831

Possible Implementation

The PrimeIcons font is already loaded with icons mapped to unicode sequences:

              ctx.textAlign = "left";
              ctx.fillText(
                title,
                title_height,
                LiteGraph.NODE_TITLE_TEXT_Y - title_height
              );
              if (node22.pinned) {
                ctx.font = `${this.title_text_font.split(" ")[0]} PrimeIcons`
                ctx.fillText(
                  "\uea25",
                  title_height + ctx.measureText(title).width + 8,
                  LiteGraph.NODE_TITLE_TEXT_Y - title_height
                )
              }

Comparison

[webfiltered]

Resolved by #117 #120

[LukeG89]

@webfiltered The meaning of this issue was to replace the current (ugly) pin icon with a prettier one (as also requested here Comfy-Org/ComfyUI_frontend#831)

Is there a plan to change it?

[webfiltered]

Ah, I misread.

Worth noting: it's just text: 📌, so this feature is currently implemented in litegraph using fillText. I've re-opened regardless, in case it is transferred to frontend, or some kind of iconography is added to Litegraph.

[webfiltered]

I could probably expand on that a little. Being text, it's determined by the system it's running on. You can see HCL's screenshots on #120 show a different icon to yours.

The font specified for group titles is Arial. From the looks of it you're running Windows 11 - so, Segoe UI Emoji. I have not attempted to alter the system emoji font, but apparently it is possible.

[LukeG89]

Is it not possible to implement just that single icon (at least for now) instead of using the system fonts?

[webfiltered]

It's a bit more complex than that - keep in mind Litegraph itself has no imports, and renders this all using canvas, not html elements.

Need to confirm we can (legally) rip the font file out of the lib, copy the code for how it's inserted, get the right code point, then measure the current Arial text render length, and add a new fillText on the end using the custom font. Which we would also have to verify is loaded...

It might be easier than it sounds, but it's just not that simple to do properly.