feat: Fonts are loaded automatically.

src/font.d.ts

@@ -0,0 +1 @@
+declare module '*.ttf';

src/index.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useImperativeHandle, useEffect, useRef, useState } from 'react';
 import * as monaco from 'monaco-editor';
-import {editor, languages} from 'monaco-editor';
+import { editor, languages } from 'monaco-editor';
+// @ts-ignore
+import codicon from 'monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf';
 
 function noop() {}
 
@@ -55,6 +57,14 @@ export interface MonacoEditorProps extends Omit<React.HTMLAttributes<HTMLDivElem
   onChange?: (value: string, event: monaco.editor.IModelContentChangedEvent) => void;
 }
 
+export async function loadFont(fontFamily: string, url: string): Promise<void> {
+  const font = new FontFace(fontFamily, `local(${fontFamily}), url(${url})`);
+  // wait for font to be loaded
+  await font.load();
+  // add font to document
+  document.fonts.add(font);
+}
+
 export interface RefEditorInstance {
   container: HTMLDivElement | null;
   editor?: monaco.editor.IStandaloneCodeEditor;
@@ -87,6 +97,11 @@ function MonacoEditor(props: MonacoEditorProps, ref: ((instance: RefEditorInstan
         onChange!(valueCurrent, event);
       });
     }
+    loadFont('codicon', codicon).catch((e) => {
+      if (e) {
+        throw new Error('Failed to load font codicon!!');
+      }
+    });
   }, []);
 
   useEffect(() => {