From b53eaddcf2ca261ea5798f342e0ec600bf60ca19 Mon Sep 17 00:00:00 2001
From: Aaron Dodson <adodson@google.com>
Date: Fri, 26 Apr 2024 14:45:11 -0700
Subject: [PATCH] fix: display icons in the toolbox for extension categories
 (#47)

---
 core/css.js                        |  6 ++++++
 src/scratch_continuous_category.js | 15 +++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/core/css.js b/core/css.js
index 6eb7d6d266..2ec49ad874 100644
--- a/core/css.js
+++ b/core/css.js
@@ -1275,6 +1275,12 @@ const styles = `
   .scratchCategoryMenuItem:hover {
     color: $colour_toolboxHover !important;
   }
+
+  .categoryIconBubble {
+    margin: 0 auto 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 `;
 
 Blockly.Css.register(styles);
diff --git a/src/scratch_continuous_category.js b/src/scratch_continuous_category.js
index 1a29b82118..dac529127a 100644
--- a/src/scratch_continuous_category.js
+++ b/src/scratch_continuous_category.js
@@ -3,11 +3,18 @@ import {ContinuousCategory} from '@blockly/continuous-toolbox';
 
 class ScratchContinuousCategory extends ContinuousCategory {
   createIconDom_() {
-    const icon = super.createIconDom_();
-    icon.style.border = `1px solid ${this.toolboxItemDef_['secondaryColour']}`;
-    return icon;
+    if (this.toolboxItemDef_.iconURI) {
+      const icon = document.createElement('img');
+      icon.src = this.toolboxItemDef_.iconURI;
+      icon.className = 'categoryIconBubble';
+      return icon;
+    } else {
+      const icon = super.createIconDom_();
+      icon.style.border = `1px solid ${this.toolboxItemDef_['secondaryColour']}`;
+      return icon;
+    }
   }
-  
+
   setSelected(isSelected) {
     super.setSelected(isSelected);
     // Prevent hardcoding the background color to grey.