How do I put an icon (SVG) to the left of Category text?

[Max Stephen Russell]

Recently I tried, and failed, to position an icon to the left of the text on each toolbox category. In response to Maribeth's offer to help (https://groups.google.com/g/blockly/c/05ULos6gdCE/m/_RsI42FVBgAJ), I am posting the related CSS file and the toolbox script (with some categories removed for brevity).

Thanks very much!

Steve Russell

/* toolbox_style.css - This file derived from custom-toolbox-codelab */

/* Makes our label white. */
.blocklyTreeLabel {
  color: #ffffff;
}
/* Adds padding around the group of categories and separators. */
.blocklyToolboxContents {
  padding: 0.5em;
}
/* Adds space between the categories, rounds the corners and adds space around the label. */
.blocklyTreeRow {
  padding: 3px;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
/* Changes color of the icon to white. */
.customIcon {
  color: #fff;
}
/* Stacks the icon on top of the label.
.blocklyTreeRowContentContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}*/
.blocklyTreeRow {
  height: initial;
}
.customLabel {
  font-family:Tahoma, Verdana, Geneva, sans-serif;
  margin-bottom: 0.5em;
  text-align: center;
}
.customLabel2 {
  font-family:Tahoma, Verdana, Geneva, sans-serif;
  margin-bottom: 0.5em;
  text-align: center;
}
.myLabelStyle {
  font-style: normal;
  font-weight: bold;
  fill: green;
}

.myLabelStyle.myLabelStyle >.blocklyFlyoutLabelText {
  font-style: regular;
  font-weight: bold;
  fill: rgb(35, 68, 35);
}

/*
.myLabelStyle>.blocklyFlyoutLabelText {
  font-style: italic;
  fill: green;
}*/

.css-regulation-label { /* for testing */
  background-color: #e0f7fa; /* Light cyan—pick any color you like */
  padding: 2px 4px; /* Optional: adds some space */
  font-size:xx-small; /* for testing */
  color: aqua; /* for testing */
}

.myVariableButtonStyle {
  color: rgb(165, 160, 160);
}

.myVariableButtonStyle.myVariableButtonStyle > .blocklyText {
  font-style: italic;
  font-size: 30px;
  color: rgb(165, 160, 160);
}

.myVariableButtonStyle:hover{
  fill: rgb(165, 160, 160);
}

.myBlueButtonStyle {
  fill: rgb(18, 156, 147);
}

.myBlueButtonStyle.myBlueButtonStyle > .blocklyText {
  font-style: italic;
  font-size: 30px;
  color: red;
}

.myBlueButtonStyle:hover{
  fill:rgb(27, 200, 200);
}

.myRedButtonStyle {
  fill: rgb(156, 18, 34);
}

.myRedButtonStyle.myRedButtonStyle > .blocklyText {
  font-style: italic;
  font-size: 30px;
  color: rgb(127, 31, 31);
}

.myRedButtonStyle:hover{
  fill:rgb(200, 27, 36);
}

.myGreenButtonStyle {
  fill: #4baa6d;
}

.myGreenButtonStyle.myGreenButtonStyle > .blocklyText {
  font-style: italic;
  font-size: 30px;
  color: #4baa6d;
}

.myGreenButtonStyle:hover {
  fill:#6ecc8f;
}

/*
Everything below was part of failed attempts to put SVGs to left of category text.

.toolbox-start {
  background-image: url('icons/start.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
  display: block !important;
}
.toolbox-proposal {
  background-image: url('icons/proposal.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
  display: block !important;
}
.toolbox-action {
  background-image: url('icons/action.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  width: 20px;
  height: 20px;
  display: block !important;
} */

    .blocklyTreeRowContentContainer {
      display: flex;
      flex-direction: row; /* Stacks icon on top of label */
      align-items: center; /* Centers icon and label horizontally */
    }

/*
.blocklyTreeRow {
  display: flex !important;
  align-items: center;
}

.blocklyTreeIcon {
  display: inline-block !important;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}

.blocklyTreeLabel {
  display: inline !important;
  margin: 0 !important;
}*/

/*
.blocklyTreeLabel {
  display: inline !important;
  margin: 0 !important;
  line-height: 1;
}

.blocklyTreeIcon {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 8px;
  background-size: 16px 16px;
  width: 20px;
  height: 20px;
}*/

--------------

// toolbox.js

export const toolbox = {
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "toolboxlabel",
      "name": "%{BKY_RTL_CATEGORY_BUILDING_BLOCKS}",
      "colour": "darkslategrey",
      "cssconfig": {
        "label": "customLabel"
      }
    },
    {
      "kind": "category",
      "name": "%{BKY_RTL_CATEGORY_START}",
      "colour": 25,
      "cssConfig": {
       "icon": "toolbox-start"
        },
      "contents": [
        {"kind": "block", "type": "start_placard"},
        {"kind": "block", "type": "country_rtl"},
        {"kind": "block", "type": "state_rtl"},
        {"kind": "block", "type": "other_org_rtl"},
      ]
    },
    {
      "kind": "category",
      "name": "%{BKY_RTL_CATEGORY_PROPOSAL}",
      "colour": 275,
      "cssConfig": {
       "icon": "toolbox-proposal"
        },
      "contents": [
        {"kind": "block", "type": "proposal_placard"},
        {"kind": "block", "type": "proposal_hdr"},
        {
          "kind": "block",
          "type": "proposal_line",
          "fields": {
            "PROPOSAL_TEXT": "Enter more proposal details here."
          }
        },
        {
          "kind": "label",
          "text": "%{BKY_RTL_TOOLBOX_LABEL_0}",
          "web-class": "myLabelStyle"
        },
        {
          "kind": "block",
          "type": "proposal_line",
          "fields": {
            "PROPOSAL_TEXT": ""
          }
        },
        {
          "kind": "label",
          "text": "%{BKY_RTL_TOOLBOX_LABEL_1}",
          "web-class": "myLabelStyle"
        },
        {"kind": "block", "type": "marker_separator"}
      ]
    },
    {
      "kind": "category",
      "name": "%{BKY_RTL_CATEGORY_ACTION}",
      "colour": 240,
      "cssConfig": {
       "icon": "toolbox-action"
        },
      "contents": [
        {
          "kind": "button",
          "text": "Return to Top",
          "web-class": "myVariableButtonStyle",
          "callbackKey": "returnToTopBtn"
        },
        {
          "kind": "button",
          "text": "%{BKY_RTL_BUTTON_CONNECT_VARIABLE}",
          "web-class": "myVariableButtonStyle",
          "callbackKey": "connectVariablesBtn"
        }
      ]
    }
  ]
};

[Ronald Bourret (xWF)]

The icon is displayed to the left of the category name by default. The HTML structure is:

<div class="blocklyTreeRowContentContainer" >

  <span class="my-icon" style="display: inline-block;"></span>

  <span id="blockly-1.label" class="blocklyToolboxCategoryLabel">My category</span>

</div>

Here is a simple application that shows this:

const toolbox = {

"kind": "categoryToolbox",

"contents": [

{

"kind": "category",

"name": "My category",

"colour": 25,

"cssConfig": {

"icon": "my-icon"

},

"contents": [

{"kind": "block", "type": "math_number"},

]

},

]

};

const workspace = Blockly.inject("blocklyDiv", { toolbox: toolbox, })

.my-icon {

background-image: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/copyright.svg);

background-size: 16px 16px;

background-repeat: no-repeat;

background-position: center;

width: 16px;

height: 16px;

}

You can play with this at:

https://jsfiddle.net/rpbourret/xs43hzc6/25/

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/681992c1-a1c8-41ac-a953-ab2e2a9121abn%40googlegroups.com.

[Max Stephen Russell]

Ron,

Thank you for making all my icon troubles go away, in 30 seconds!

May I ask (after failing), if I wished to move an icon on a category one pixel to the right, how I would do that?

-Steve Russell

[Ronald Bourret (xWF)]

Add the following CSS rule to the icon's style:

  translate: 1px 0px

Note that x increases to the right and y increases downward.

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

To view this discussion visit https://groups.google.com/d/msgid/blockly/d3a7349a-9187-4f19-8ae3-eea3cbe1a350n%40googlegroups.com.

[Max Stephen Russell]

Wonderful! Thank you so much, Ron. I was hoping you too were still going to be around when Blockly moved.

-Steve

[Max Stephen Russell]

And how do I apply the category color to the icon (as is done for the text) when the category is selected?

We have tried a few things with .blocklyTreeSelected .

Thank you.

-Steve Russell

[fu6...@gmail.com]

Hi   Steve,

Blockly.ToolboxCategory.prototype.createIconDom_ = function() {

    const iconImg = document.createElement('img');

      iconImg.src = 'data:image/png;base64,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';

    iconImg.alt = '';

    iconImg.width = '25';

    iconImg.height = '25';

    return iconImg;

}

Blockly.Css.register([

 `

  .blocklyTreeRowContentContainer {

    display: flex;

    flex-direction: row;

    align-items: center;

  }

  .blocklyTreeRow {

    height: initial;

  }

`

]);

const toolbox = {

  "kind": "categoryToolbox",

  "contents": [

    {

      "kind": "category",

      "name": "My category",

      "contents": [

        {"kind": "block", "type": "math_number"},

      ]

    },

  ]

};

const workspace = Blockly.inject("blocklyDiv", { toolbox: toolbox, })

Hope this helps.


Best wishes

fu6...

maxsr...@gmail.com 在 2025年11月12日 星期三上午10:50:03 [UTC+8] 的信中寫道：

[Ronald Bourret (xWF)]

It looks like you're using a background image for your icon. As far as I can tell, you can't use CSS to change the color of a background image, even if it's an SVG image. (The toolbox codelab doesn't run into this problem because it uses a character for the icon, so the normal CSS properties apply.)

One workaround is to change the image itself to an image that uses the new color. For example:

.my-icon {
  background-image: url('icons/icon-red.svg');

}

.blocklyToolboxSelected .my-icon {

  background-image: url('icons/icon-green.svg');

}

Note that blocklyTreeSelected was changed to blocklyToolboxSelected in v12.

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

To view this discussion visit https://groups.google.com/d/msgid/blockly/f72849e9-ea47-41c7-ae5a-a67e545226acn%40googlegroups.com.

[Max Stephen Russell]

I wish I could say blocklyToolboxSelected works for me. Right now I have:

.blocklyToolboxSelected .toolbox-start {
  background-image: url('icons/start-selected.svg');
}

But no matter what approach I use inside blocklyToolboxSelected, I get no visible result. 

Thanks very much!

-Steve Russell

[Mark Friedman]

Steve,

  Do other non-image-related style properties work when the category is selected?  What I mean is if you specified, say, "text-decoration: line-through;" instead of "background-image: url('icons/start-selected.svg');" in your code below, does that work?  The idea here is just to test that you've got the CSS stuff correctly wired up independent of the icon stuff.

  Related to that, are you sure about adding .toolbox-start to your CSS selector?  I'm not sure that that exists, at least not in V12.

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/7b9e595b-f5c2-4efb-94eb-fcef628d5542n%40googlegroups.com.

[Max Stephen Russell]

Hi Mark. No,  "text-decoration: line-through;" has no effect inside:

.blocklyToolboxSelected .toolbox-start {
  background-image: url('icons/start-selected.svg');
}

And no, I am not sure I am using the CSS selector properly. Now I do not think I am. I did try the following, though to no effect:

.blocklyTreeRow.blocklyToolboxSelected .toolbox-start {
  background-image: url('icons/start-selected.svg'); 

  text-decoration: line-through;
}

Thanks very much.

-Steve

[Ronald Bourret (xWF)]

Several things:

1) Are you using v12 or an earlier version? Many of the toolbox classes were renamed in v12. If you're using v12, use blocklyToolboxCategory and blocklyToolboxSelected. If you're using an earlier version, use blocklyTreeRow and blocklyTreeSelected.

2) When you construct your toolbox, are you adding the toolbox-start class to the span that contains the icon? To understand how this is done, open your browser's inspector and look at the div containing the toolbox. When you expand everything, you'll see an HTML structure that looks roughly like this:

<div class="blocklyToolbox">
  <div class="blocklyToolboxCategoryGroup">
    <!-- First top-level category -->
    <div class="blocklyToolboxCategoryContainer">
      <div class="blocklyToolboxCategory">
        <div class="blocklyTreeRowContentContainer">
          <span class="blocklyToolboxCategoryIcon"></span>
          <span class="blocklyToolboxCategoryLabel">Logic</span>
        </div>
      </div>
    </div>
    <!-- Second top-level category -->
    <div class="blocklyToolboxCategoryContainer">...</div>
    <!-- etc. -->
  </div>
</div>

You can add CSS classes to each of the elements in this tree using the cssConfig property in the JSON definition of your toolbox. For example, to add the toolbox-start class to the blocklyToolboxCategoryIcon span, use the following:

{
  "kind": "category",
  "name": "My category",

  "cssConfig": {
     "icon": "toolbox-start"
  },
  "contents": [...]

},

The relationship between the cssConfig properties and the various parts of the toolbox is explained in the table in Category CSS. Note that because cssConfig is specified in the JSON for each category, you can add different classes to each part of each category -- the docs give an example of this.

So to specify a different icon when the category is opened, the v12 CSS would be:

.blocklyToolboxSelected .toolbox-start {
  background-image: url('icons/start-selected.svg');

}

and the <v12 CSS would be:

.blocklyTreeSelected .toolbox-start {
  background-image: url('icons/start-selected.svg');

}

Note that we use the space CSS combinator because blocklyToolboxSelected is added to the blocklyToolboxCategory div, which is an ancestor of the blocklyToolboxCategoryIcon span. (If you use your browser's inspector, you can watch blocklyToolboxSelected being added/removed as you open/close the category.)

For an example that changes the icon from copyright to copyleft when the category is selected, see https://jsfiddle.net/rpbourret/xs43hzc6/42/

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

To view this discussion visit https://groups.google.com/d/msgid/blockly/2e8f530d-f435-4db5-be7f-2d98ee07b038n%40googlegroups.com.

[Max Stephen Russell]

Ron, Thank you for the perfectly clear response, including the fiddle. Somehow I missed moving to v12, which I will do after I solve this trouble. In the toolbox and CSS code I posted at the start of this thread, I demonstrated my use of cssConfig exactly as you demonstrate:

{
      "kind": "category",
      "name": "%{BKY_RTL_CATEGORY_START}",
      "colour": 25,
      "cssConfig": {
       "icon": "toolbox-start"
        },
      "contents": [
        {"kind": "block", "type": "start_placard"},
        {"kind": "block", "type": "country_rtl"},
        {"kind": "block", "type": "state_rtl"},
        {"kind": "block", "type": "other_org_rtl"},
      ]
    },

And I now have the following, but without any result:

.blocklyTreeSelected .toolbox-start {
  background-image: url('icons/start-selected.svg');
}

However -- Since beginning this post, I am thinking the problem may boil down to my webpack.config.js and CSS files. The only CSS file listed under Network is index.css, and it has a 404. So I'm trying to get to the bottom of it, and it's not my strong suit.

Thanks very much.

-Steve Russell

[Max Stephen Russell]

Before upgrading in the last few days from v11 to v12, we got the category icons working according to selected and not-selected CSS rules This included a listener that overrode, yet required, a blocklyTreeSelected rule.

Then with v12 there came a rigorous and valuable target-shooting adjustment, studying HTML elements in the browser Developer Tools. This HTML dimension was the critical emphasis in Ron's earlier post. Now, although some things can at first be confounding, Blockly's clean modernization is plain to see and a pleasure to take advantage of. It receives an A+ from me.

Finally, in the midst of the difficult transition to v12, I decided that icons do not serve a worthwhile purpose in categories that are already color-coded and labeled.

Thanks to all for your help.

Steve