Monaco Editor missing icons

Question

The icons in Moncao Editor (0.20) are missing, they only show as blank squares in my instances. What am I missing in order to make them appear in my Vue (2.x) app?

In Devtools > Elements, the css for :before pseudoclass looks like this for "Use regular expressions" button.

In webpack.config.js (4.x), I have this under modules.rules

 { // monaco
    test: /\.ttf$/,
    use: ['file-loader']
  }

EDIT: In Devtools > Network tab, in the playground of Monaco Editor's website, I can see that codicon.ttf is being fetched from microsoft.github.io/node-modules/... , but in my app no .ttf files being fetched. Seems like that is the root of the issue. How can I fetch it when initializing the code editor?

Answer 1

I figured a solution to my own problem.

I was expecting the codicon.ttf file (which has the icons I need) to be loaded by monaco-editor from /node_modules, but it was not working. Instead, I have copied the ttf file, put it in my asset folder (or any folder where I have direct access on the client app), and call it in the vue component where I initialize the code editor.

My style tag looks like this in CodeEditor.vue:

<style>
  @font-face {
    font-family: "codicon";
    src: url(/app/font/codicon.ttf);
  }
  #monacoel {
    font-family: "codicon";
  }
</style>