Microsoft/monaco-editor

[Bug] Codicon not loading for expand/collapse in 0.38.0v

Open

#3972 opened on May 23, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (14,836 stars) (1,283 forks)batch import
bughelp wanted

Description

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

No response

Reproduction Steps

I tried updating the version of monaco-editor from 0.22.0 to 0.38.0 and also updated the monaco-webpack-plugin to the latest version. The issue is that the codicon icon for expanding and collapsing a codeblock is not loading instead it shows a placeholder rectangle box.

I saw that in earlier version It used to use the icons but now it is using unicodes. All the places where the unicodes are being used are rendering properly like find and replace tool but only this is not working as expected.

Nextjs Webpack 5

Attached the image for reference.

Actual (Problematic) Behavior

Instead of the codicon icon for collapse and expand the placeholder icon is rendering.

Expected Behavior

The arrow icons should render.

Additional Context

No response

Contributor guide

Tech stack
javascripttypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScript/TypeScriptWebpack configurationMonaco Editor basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Start by examining the codicon CSS and font loading mechanism in the monaco editor source. Check the webpack configuration for proper handling of codicon assets. Compare the icon rendering logic between versions 0.22 and 0.38, particularly for the expand/collapse elements. Look for changes in the use of CSS classes like 'codicon chevron right' or similar.