[v10.1.x] Canvas: Avoid conflicting stylesheets when loading SVG icons

[grafana-delivery-bot]

Backport 7171b35 from #74461

---

While investigating https://github.com/grafana/support-escalations/issues/7316 we noticed that the SVGs used had the same class names defined between the <style> tag, which was causing the SVGs to borrow styling from one to another. The issue doesn't happen for SVGs that don't have custom styling defined.
The solution was to add a unique ID to each SVG and use the ID when defining the classes.

Before

svgs_before.mov

After

svgs_after.mov

Fixes https://github.com/grafana/support-escalations/issues/7316

Special notes for your reviewer:
Cases covered:

• add new ID to SVG when not defined
• if ID is defined, use it/overwrite the existing one in <style>

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.