refactor(treeView): replace bundled icons with iconify-based icon support

[sidharthv96]

Summary

Reworks treeView-beta icons from bundled SVG paths to the shared iconify pipeline used by other diagrams (architecture, flowchart icon shapes), removing all Apache-2.0-licensed icon assets in the process.

• All ~30 bundled Material Design Icons (Apache 2.0) paths are removed, and no filename/extension → icon mapping is bundled — mermaid has no opinion about which icon a file type should use
• The diagram ships a built-in iconify pack (prefix mermaid-treeview) containing just two originally drawn icons — file and folder — themed via currentColor/iconColor
• Everything else comes from user-registered iconify packs through registerIconPacks/getIconSVG, exactly like the architecture diagram

Icon resolution

For each node, the icon is resolved in this order:

1. icon(none) / icon() → no icon
2. icon(pack:name) → used as-is; icon(name) → built-in file/folder, else qualified with defaultIconPack. Explicit icons always render, even with showIcons off
3. No annotation + showIcons: true → files are matched against the user-configured filenameIcons (exact name) and extensionIcons (last extension, case-insensitive, dot optional) maps; map values resolve like icon() references, with none hiding the icon
4. Fallback → built-in folder (directories) / file (files); with showIcons: false (the default), no icon

Unknown icon references render the standard unknown-icon ("?") fallback.

New config options

Option	Default	Purpose
showIcons	false	Opt into icons — trees render as plain labels out of the box
defaultIconPack	''	Registered pack used to resolve unprefixed icon references
filenameIcons	{}	Exact-filename → icon map (e.g. Dockerfile: docker)
extensionIcons	{}	Extension → icon map (e.g. .ts: typescript); none hides the icon for a match

---
config:
  treeView:
    showIcons: true
    defaultIconPack: material-icon-theme
    filenameIcons:
      Dockerfile: docker
    extensionIcons:
      .ts: typescript
      .tsx: react-ts
      .txt: none
---
treeView-beta
    src/
        App.tsx :::highlight icon(logos:react) ## explicit override
        utils.ts
    Dockerfile
    notes.txt
    README.md

Note

For now, icon packs (including the one named by defaultIconPack) must be registered by the embedding site via registerIconPacks. Once #7113 lands, icon packs will also be addable via config, making the icon options usable without any JS setup.

Implementation notes

• Grammar: the ICON_ANNOTATION terminal accepts an optional pack: prefix (Langium regenerated)
• Renderer: each used icon is resolved once (fetched in parallel) and injected into <defs>, with rows referencing it via <use> — no repeated icon markup per row. All resolution lives in one getNodeIcon() helper shared by defs injection and row rendering
• Directive sanitizer: sanitizeDirective deleted any key not in configKeys, which stripped the arbitrary keys of filenameIcons/extensionIcons from frontmatter. The existing nodeColors special case was generalized into a dictionary-config table whose values are pattern-validated instead (suspicious keys still dropped), with new unit coverage pinning both behaviors
• Whitespace/unicode fidelity: labels render exactly as written (white-space: pre), preserving consecutive spaces and emoji (handy as inline icons since trees are plain by default); bare labels trim trailing whitespace
• Node field renamed iconId → icon to match other diagrams
• Docs, demo page, and examples package updated (config-map, override, and unicode examples); the docs site and demo page register the logos and material-icon-theme packs so examples render

Verification

• 980+ unit tests pass across the parser package, treeView suites, and the new sanitizeDirective spec; typecheck and lint clean
• E2E snapshots: config-map icon selection via a static material-icon-theme stand-in pack, defaultIconPack shorthand, explicit iconify override (fa:bell static pack), unknown-icon fallback, icon(none)/icon() hiding, consecutive-space/unicode labels, and emoji-as-icons
• Visually verified against the real material-icon-theme pack (demo page): map-driven .tsx/.ts/Dockerfile icons, none suppression, built-in fallback for unmapped files, frontmatter config path, and the <defs>/<use> dedup structure

⚠️ Existing treeView e2e snapshots will show visual diffs in Argos — expected, since the default rendering intentionally changed to plain labels (showIcons: false).

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3fcc2f4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes changesets to release 2 packages

Name	Type
mermaid	Minor
@mermaid-js/parser	Minor

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

❌ Patch coverage is 84.61538% with 20 lines in your changes missing coverage. Please review.
✅ Project coverage is 64.35%. Comparing base (d0f5418) to head (3fcc2f4).
⚠️ Report is 6 commits behind head on release/11.16.0.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/treeView/renderer.ts	64.86%	13 Missing ⚠️
...kages/mermaid/src/docs/.vitepress/theme/mermaid.ts	0.00%	7 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff                @@
##           release/11.16.0    #7840   +/-   ##
================================================
  Coverage            64.35%   64.35%           
================================================
  Files                  668      668           
  Lines                74754    74825   +71     
  Branches             11107    11129   +22     
================================================
+ Hits                 48107    48156   +49     
- Misses               26647    26669   +22     

Flag	Coverage Δ
unit	64.35% <84.61%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/examples/src/examples/tree-view.ts	100.00% <100.00%> (ø)
packages/mermaid/src/config.type.ts	100.00% <ø> (ø)
packages/mermaid/src/diagrams/treeView/db.ts	100.00% <100.00%> (ø)
packages/mermaid/src/diagrams/treeView/icons.ts	100.00% <100.00%> (ø)
packages/mermaid/src/diagrams/treeView/parser.ts	87.17% <100.00%> (-1.71%)	⬇️
packages/mermaid/src/diagrams/treeView/styles.ts	100.00% <100.00%> (ø)
packages/mermaid/src/diagrams/treeView/types.ts	100.00% <ø> (ø)
packages/mermaid/src/utils/sanitizeDirective.ts	93.25% <100.00%> (+10.59%)	⬆️
...ges/parser/src/language/treeView/valueConverter.ts	100.00% <100.00%> (ø)
...kages/mermaid/src/docs/.vitepress/theme/mermaid.ts	0.00% <0.00%> (ø)
... and 1 more

... and 2 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	10 changed, 9 added, 1 removed	Jun 11, 2026, 12:23 PM