How can I change the icon for a new category in the right side menu?

Hello,
With v2.0.2, we introduced a new iconName setting which allows you to define icons for individual property grid categories. To specify an icon for a custom page category, implement the creator.onSurveyInstanceCreated event handler and define the icon name:

JavaScript
import { SvgRegistry } from "survey-core";
import { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = { ... };
const creator = new SurveyCreatorModel(creatorOptions);

const customIcon = '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="..."/></svg>';
SvgRegistry.registerIcon("icon-custom", customIcon);

creator.onSurveyInstanceCreated.add((_, options) => {
  if (options.area === "property-grid") {
    const choicesCategory = options.survey.getPageByName("choices");
    if (choicesCategory) {
      choicesCategory.iconName = "icon-custom";
    }
  }
})

View Demo

You may wish to use any predefined icon from the Form Library / Survey Creator package or register a custom icon. For more information on how to use predefined and custom icons, please refer to our documentation: UI Icons.