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"
        }
      ]
    }
  ]
};