Removing labels from buttons and only using icons

I’m wondering if it’s possible to display only the icons as and not the text as specified in the original icon issue, for creating and removing object and array entries.

Currently the JSON below will generate the following buttons:

I can either get:

• The name of the category
• Blank for add, but not delete by setting category to " "
• “item” used for the category if I don’t specify anything.

There is no specific wrapper on the text so I can’t hide just that and setting the font-size: 0 will also kill the font awesome icon.

Am I missing a basic configuration option here, any ideas how to best go about doing this?

{
      disable_properties: true,
      disable_collapse: true,
      disable_edit_json: true,
      theme: "bootstrap3",
      iconlib: "fontawesome4",
      schema: {
        type: "array",
        title: "categories",
        items: {
          type: "object",
          title: "category level 1",
          properties: {
            "Category 1": {
              type: "string",
              enum: ["Fill me"]
            },
            category2: {
              type: "array",
              // title: "category 2",
              items: {
                type: "object",
                title: " ",
                properties: {
                  "Category 2": {
                    type: "string",
                    enum: ["Fill me"]
                  },
                  "Category 3": {
                    type: "array",
                    title: "Category 3",
                    items: {
                      "Category 2": {
                        type: "string",
                        enum: ["Fill me"]
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  );
});

[pmk65]

Made a patch with span tags and it seems to be working perfectly. 😃 But the json-editor-btn- class is based on the iconlib key, so it might not be specific enough to style individual buttons. Especially the Array/Table “Delete” and “Delete All” buttons, which have the same icon/class name. There’s probably more, so if you got any ideas/suggestions let me know. I’ll then add some custom class names to those buttons.

[pmk65]

Only one I can think of is that the HTML is always created for both icon and label, so the output will be a little bit larger due to the span tags.

The 3rd example will only work on Bootstrap themes, so we might want to introduce 1 or more extra “json-editor-btn-*” class names (Must be set regardless of theme). That way we can group buttons of same “type”.

The function that toggles button states like Expand/Collapse might need to be updated to be able to insert the correct text inside the span tags.