Toolbox Category Icons

[Max Stephen Russell]

Question 1:  I was using Unicode symbols as icons (along with text) on my toolbox category buttons. They look great on my devices, but is this a reliable method for all browsers and screens?

Question 2:  Thinking that it might not be reliable, I'm now trying, and failing, to get icons to appear on my toolbox category buttons. Is there anything wrong with the following?

    {

      "kind": "category",

      "name": "%{BKY_RTL_CATEGORY_VARIABLES}",

      "categorystyle": "variable_category",

      "icon": "icons/variables.svg",

      "custom": "VARIABLE"

    },

Thank you.

Steve Russell

[epas...@google.com]

Hi Steve,

Q1. It's not entirely reliable. Rendering of Unicode symbols depends on the font having that symbol. Most browsers depend on the system font rendering, which typically has a fallback when it's missing a symbol, but it's not a guarantee and icons can look very different depending on the font. SVG is a much better option.

Q2. Most of the appearance related properties, including icon, are expecting a CSS class name. I think it'll work if you create a CSS class with the background-image set to your SVG path and then set the "icon" property to the name of that CSS class.

Let me know if that doesn't work!

Cheers,

Erik

[Max Stephen Russell]

Thanks very much, Erik. I'm still lacking something. Here's what I am trying, while looking at your advice and the Category appearance guide page:

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

 {

      "kind": "category",

      "name": "%{BKY_RTL_CATEGORY_REGULATION}",

      "colour": 140,

      "cssConfig": {

       "icon": "toolbox-regulation"

        },

      "contents": [

    ...

-Steve Russell

[epas...@google.com]

Hmm...you might also need a height and width in the class. You might want to use the browser inspector to see if the icon div is getting created and if so what properties it has.

[Max Stephen Russell]

I tested with a fontawesome SVG and it displays. So I can deal separately with the SVG trouble. Now I'm stuck with...

Question 3: Is it possible to position an icon on a category, to the left of the category text?

Thanks.

-Steve Russell

[Max Stephen Russell]

Uh! Apparently I just learned how to put a category icon next to the category text!

    .blocklyTreeRowContentContainer {

      display: flex;

      flex-direction: row;

      align-items: left;

    }

-Steve Russell

[Max Stephen Russell]

Apparently  align-items: center;  is the correct setting, though I cannot see a difference.

[epas...@google.com]

Glad you got something working!

Two notes regarding align-items based on the documentation for that attribute.

• It affects the direct children's alignment along the 'cross axis' which is the axis you're not using for flex-direction (so if flex-direction is row the cross axis is column). If your SVG is the full height of the row then the align-items attribute won't make a difference because there's no space to move it around.
• 'left' isn't supported by align-items. 'start' is the property you're looking for and it'll automatically align it to the top, left, right, or bottom depending on the flex-direction.

Cheers,

Erik

[Max Stephen Russell]

Erik,

Thanks for pointing this out to me and for sending me the very helpful link.

Steve Russell

--
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/bc0e26bc-bdb4-4846-b497-d808726b0751n%40googlegroups.com.