Align "Add note" and "Query features" context menu icons with sidebar

[aNsHuL5217]

Problem

Following up on the discussion in #6485 and PR #6571.

There is currently a visual mismatch between the context menu and the sidebar for the map tool icons:

• Add a note: The context menu uses bi-chat-text (a standard speech bubble), while the sidebar uses a custom SVG (a speech bubble with a plus sign).
• Query features: The context menu uses bi-question (a plain question mark), while the sidebar uses a custom SVG (a cursor arrow with a small question mark).

Description

Since the context menu currently relies on Bootstrap CSS classes (bi-*), we cannot easily use the exact files used in the sidebar without refactoring the createMenuItem function to support inline SVGs or image tags.

We need to decide on the best path forward:

1. Is there a closer Bootstrap icon match that we missed?
2. Or should we refactor the context menu code to support inline SVGs/Images so we can use the exact same assets as the sidebar?

Screenshots

[snehaljadhav7317]

I'm looking into this. I plan to proceed with the second suggestion mentioned in the description refactoring the createMenuItem function to support inline SVGs or image tags.

This seems like the best approach to ensure the context menu icons for "Add a note" (speech bubble with a plus sign) and "Query features" (cursor arrow with a small question mark) exactly match the custom SVGs used in the sidebar, rather than relying on approximate Bootstrap matches.

[aNsHuL5217]

I'm looking into this. I plan to proceed with the second suggestion mentioned in the description refactoring the createMenuItem function to support inline SVGs or image tags.

This seems like the best approach to ensure the context menu icons for "Add a note" (speech bubble with a plus sign) and "Query features" (cursor arrow with a small question mark) exactly match the custom SVGs used in the sidebar, rather than relying on approximate Bootstrap matches.

I agree that refactoring createMenuItem to support inline SVGs (or image tags) is the right way forward here. Reusing the exact same SVG assets as the sidebar will give us proper visual consistency and avoids trying to approximate them with Bootstrap icons.
I’d suggest keeping the existing Bootstrap-based behavior intact and extending createMenuItem in a generic way to handle SVGs, rather than special-casing individual menu items. That should keep the change clean and maintainable.

[pablobm]

My understanding is that the project has been moving away from hosting the SVG icons, towards using those provided by Bootstrap. For example: #6487 Therefore your proposal might not be a good idea.

@hlfan - I can't see where this effort started, beyond your PRs. Is there an issue or something with a rationale?

[hlfan]

The earliest related RFC I could find is #2452 by @gravitystorm; at the point where I joined the effort, all newly added icons came from bootstrap when available.
#5880 suggested external SVG files, and #6410 added the bootstrap icon font, incentivising this source even more.

I don't think it's an explicit effort, just code simplification and deduplication. Nothing really against custom icons.

[aNsHuL5217]

@hlfan Thanks for the context.
Our main goal here is visual consistency, as the mismatch between the sidebar and context menu is confusing.
Since the specific icons used in the sidebar don't seem to have exact matches in the Bootstrap set, we proposed using custom SVGs in the context menu to match the sidebar.
However, if the project strictly prefers Bootstrap, should we instead consider changing the sidebar icons to standard Bootstrap ones?

[hlfan]

The sidebar control icons have already been a topic in the maplibre migration, so simplifying the usage to also just use Bootstrap icons instead of the current low-poly SVGs sounds good to me.

And while at it, I don't like that notes and comments have the same oval chat icon associated with them. for the map controls sidebar I'd suggest these:

SVG name	bs-icon
zoomin	plus-lg
zoomout	dash-lg
geolocate	cursor-fill
layers	stack
legend	info-lg
share	share-fill
note	chat-square-fill
query	question-lg

[snehaljadhav7317]

The sidebar control icons have already been a topic in the maplibre migration, so simplifying the usage to also just use Bootstrap icons instead of the current low-poly SVGs sounds good to me.

And while at it, I don't like that notes and comments have the same oval chat icon associated with them. for the map controls sidebar I'd suggest these:

SVG name bs-icon
zoomin plus-lg
zoomout dash-lg
geolocate cursor-fill
layers stack
legend info-lg
share share-fill
note chat-square-fill
query question-fill

Thanks @hlfan. I will proceed with your suggestion to update the sidebar control icons to use the Bootstrap equivalents you listed.

[aNsHuL5217]

That sounds like a great plan. Updating the sidebar to use standard Bootstrap icons resolves the inconsistency issue