Add documentation on adding completer icon themes

Author: krassowski

docs/Extending.ipynb

@@ -112,6 +112,45 @@
     "a work-in-progress."
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### How to add custom icons for the completer?\n",
+    "\n",
+    "1. Prepare the icons in the SVG format (we use 16 x 16 pixels, but you should be\n",
+    "   fine with up to 24 x 24). You can load them for webpack in typescript using\n",
+    "   imports if you include a `typings.d.ts` file with the following content:\n",
+    "\n",
+    "   ```typescript\n",
+    "   declare module '*.svg' {\n",
+    "     const script: string;\n",
+    "     export default script;\n",
+    "   }\n",
+    "   ```\n",
+    "\n",
+    "   in your `src/`. You should probably keep the icons in your `style/`\n",
+    "   directory.\n",
+    "\n",
+    "2. Prepare `CompletionKind` → `IconSvgString` mapping for the light (and\n",
+    "   optionally dark) theme, implementing the `ICompletionIconSet` interface. We\n",
+    "   have an additional `Kernel` completion kind that is used for completions\n",
+    "   provided by kernel that had no recognisable type provided.\n",
+    "\n",
+    "3. Provide all other metadata required by the `ICompletionTheme` interface and\n",
+    "   register it on `ILSPCompletionThemeManager` instance using `register_theme()`\n",
+    "   method.\n",
+    "\n",
+    "4. Provide any additional CSS styling targeting the JupyterLab completer\n",
+    "   elements inside of `.lsp-completer-theme-{id}`, e.g.\n",
+    "   `.lsp-completer-theme-material .jp-Completer-icon svg` for the material\n",
+    "   theme. Rememmber to include the styles by importing the in one of the source\n",
+    "   files.\n",
+    "\n",
+    "For an example of a complete theme see\n",
+    "[theme-vscode](https://github.com/krassowski/jupyterlab-lsp/tree/master/packages/theme-vscode)."
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},