[BUG] Diff/code block icons render as tofu (☒) in VS Code Extension chat panel due to CSP blocking base64 font
Status Closed — not planned
Reported on v2.1.39
Maintainer reply None cached
Activity 5 comments · opened Feb 19, 2026 · closed Apr 14, 2026
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
In the VS Code Extension chat panel, diff view icons (line numbers, +/- indicators)
render as broken characters (☒/tofu) instead of the intended glyphs.
What Should Happen?
Diff/code block icons render correctly in the chat panel.
Error Messages/Logs
Icons appear as ☒ (tofu) squares. Affected elements include:
- Line number indicators in code blocks
- `+` / `-` diff markers in file edit previewsSteps to Reproduce
- Open VS Code with the Claude Code extension
- Ask Claude to edit a file (triggers diff view in chat panel)
- Open
Developer: Open Webview Developer Tools→ Console tab - Observe CSP font-src violation error
- Observe ☒ rendering in the chat panel
Claude Model
None
Is this a regression?
Yes, this worked in a previous version
Last Working Version
VS Code 1.109.4
Claude Code Version
2.1.39
Platform
Anthropic API
Operating System
Windows
Terminal/Shell
VS Code integrated terminal
Additional Information
Host the icon font on https://*.vscode-cdn.net or include it as a bundled asset
accessible via vscode-resource: scheme, so it complies with the Webview CSP policy.
5 Comments
This screenshot should help clarify the visual impact of the issue beyond the console error alone.
<img width="599" height="337" alt="Image" src="https://github.com/user-attachments/assets/5f19f3dd-7fd6-48c4-aab7-faa518df5f14" />
Closing for now — inactive for too long. Please open a new issue if this is still relevant.
Still happening on latest (2.1.109)
<img width="551" height="259" alt="Image" src="https://github.com/user-attachments/assets/f4819b7a-a0a3-449c-b7a0-a527f8d2b159" />
Still reproduces on VS Code extension version 2.1.116 (Windows 11, VS Code 1.x).
Every line in the chat-panel diff view has an empty "tofu" box in the left gutter. On changed lines there's a second tofu box that, when clicked, opens a functional dropdown with "Copy this Line" / "Copy all Lines" — so the buttons work, only the codicon glyphs are missing.
Confirmed root cause by inspecting the installed extension:
webview/index.cssembeds the Codicon font as a base64@font-face(src:url(data:font/ttf;base64,...)). The webview's CSP is blocking thatdata:font URL, so every.codicon-*element falls back to the.notdefglyph.Editor-level font fallbacks (
editor.fontFamily) don't help — the webview doesn't inherit from editor settings.This issue has been automatically locked since it was closed and has not had any activity for 7 days. If you're experiencing a similar issue, please file a new issue and reference this one if it's relevant.