Skip to content

fix: underscored Material icons render; evaluate warns on unknown icons - #215

Merged
vicmaster merged 1 commit into
masterfrom
fix-material-underscore-icons
Oct 17, 2026
Merged

vicmaster merged 1 commit into
masterfrom
fix-material-underscore-icons

Conversation

@vicmaster

Copy link
Copy Markdown
Owner

Closes #214.

The bug

Material Symbols icons with more than one word in the name rendered nothing. Material names multi-word icons with underscores (chevron_right, arrow_back, group_off), and the name check in src/icons.ts allowed only letters, digits and hyphens. Those names were rejected before the file lookup, so in practice only single-word Material icons worked.

The check now also allows _. Names containing . or / are still rejected, so the guard against path-like names is unchanged. The -fill suffix keeps working, including on underscored names (material:chevron_right-fill).

Why it went unnoticed, and the warning that fixes that

When an icon name doesn't resolve, the renderer outputs only an HTML comment. The result is an empty slot that doesn't show up in a screenshot, and canvas_evaluate said nothing about it, so a canvas could carry many blank icons and still score as clean.

canvas_evaluate now reports every icon node whose name resolves in neither bundled set as a warning in the structure category. A warning blocks the "ready to present" directive, and each one costs 10 points of structure score. Icon nodes with no name at all are reported too.

The warning's suggestion names the spellings that do resolve. It tries swapping hyphens and underscores, and adding the missing material: prefix to a bare Material-style name like cloud_off, which is otherwise looked up in Lucide and renders nothing.

When exactly one spelling resolves, the warning includes a fix that canvas_autofix can apply. When more than one resolves (cloud_off exists as Lucide cloud-off and as material:cloud_off), the fix picks the set the rest of the canvas already uses. If the canvas has no other icons, or mixes both sets, there is no fix and the suggestion lists both options.

Icons inside component instances are checked as well. Their warning says to fix the component definition and carries no fix, because the node isn't in the canvas tree that autofix edits.

Docs

The agent-facing text in src/index.ts (server instructions, gotchas, the batch_design icon section, and the canvas_evaluate and canvas_autofix descriptions), docs/GUIDELINES.md and README.md now explain the spelling difference between the two sets and the new warning.

Tests

  • test-material-icons.ts adds the cases suggested in the issue: an underscored name resolves, its -fill variant resolves and is the filled glyph, and material:../x and material:a/b are still rejected.
  • New test-unknown-icons.ts (no browser needed) covers the warning: valid icons stay silent, the fix ops (including keeping -fill), the tie-break by icon set, typos with no candidate, empty names, and icons inside components.
  • npm run test:full: 101/101 passed.
  • None of the shipped structures uses an icon name that fails to resolve, so their scores don't change.

@vicmaster
vicmaster merged commit 179b675 into master Oct 17, 2026
3 checks passed
@vicmaster
vicmaster deleted the fix-material-underscore-icons branch October 17, 2026 15:02
@vicmaster vicmaster mentioned this pull request Oct 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

material: icons with underscores in the name render nothing (name allow-list rejects _)

1 participant