Colorize the listed extensions

examples/listings/package.json

@@ -17,8 +17,8 @@
     "@jupyterlab/console-extension": "^2.0.0",
     "@jupyterlab/csvviewer-extension": "^2.0.0",
     "@jupyterlab/docmanager-extension": "^2.0.0",
-    "@jupyterlab/filebrowser-extension": "^2.0.0",
     "@jupyterlab/extensionmanager-extension": "^2.0.0",
+    "@jupyterlab/filebrowser-extension": "^2.0.0",
     "@jupyterlab/fileeditor-extension": "^2.0.0",
     "@jupyterlab/help-extension": "^2.0.0",
     "@jupyterlab/imageviewer-extension": "^2.0.0",

packages/ui-components/src/icon/iconimports.ts

@@ -78,7 +78,7 @@ import yamlSvgstr from '../../style/icons/filetype/yaml.svg';
 
 // LabIcon instance construction
 export const addIcon = new LabIcon({ name: 'ui-components:add', svgstr: addSvgstr });
-export const blacklistedIcon = new LabIcon({ name: 'ui-components:blaklisted', svgstr: blacklistedSvgstr });
+export const blacklistedIcon = new LabIcon({ name: 'ui-components:blacklisted', svgstr: blacklistedSvgstr });
 export const bugIcon = new LabIcon({ name: 'ui-components:bug', svgstr: bugSvgstr });
 export const buildIcon = new LabIcon({ name: 'ui-components:build', svgstr: buildSvgstr });
 export const caretDownEmptyIcon = new LabIcon({ name: 'ui-components:caret-down-empty', svgstr: caretDownEmptySvgstr });

packages/ui-components/style/deprecated.css

@@ -13,6 +13,7 @@
 
 :root {
   --jp-icon-add: url('icons/toolbar/add.svg');
+  --jp-icon-blacklisted: url('icons/listing/blacklisted.svg');
   --jp-icon-bug: url('icons/toolbar/bug.svg');
   --jp-icon-build: url('icons/sidebar/build.svg');
   --jp-icon-caret-down-empty-thin: url('icons/arrow/caret-down-empty-thin.svg');
@@ -76,6 +77,7 @@
   --jp-icon-trusted: url('icons/statusbar/trusted.svg');
   --jp-icon-undo: url('icons/toolbar/undo.svg');
   --jp-icon-vega: url('icons/filetype/vega.svg');
+  --jp-icon-whitelisted: url('icons/listing/whitelisted.svg');
   --jp-icon-yaml: url('icons/filetype/yaml.svg');
 }
 
@@ -84,6 +86,9 @@
 .jp-AddIcon {
   background-image: var(--jp-icon-add);
 }
+.jp-BlacklistedIcon {
+  background-image: var(--jp-icon-blacklisted);
+}
 .jp-BugIcon {
   background-image: var(--jp-icon-bug);
 }
@@ -273,6 +278,9 @@
 .jp-VegaIcon {
   background-image: var(--jp-icon-vega);
 }
+.jp-WhitelistedIcon {
+  background-image: var(--jp-icon-whitelisted);
+}
 .jp-YamlIcon {
   background-image: var(--jp-icon-yaml);
 }