Support svg icons in "svc-action-button" component

packages/survey-creator-angular/src/components/action-button.component.html

@@ -1,6 +1,18 @@
 <ng-template #template>
-  <span *ngIf="disabled" class="svc-action-button svc-action-button--disabled"
-    [class]="classes" [attr.title]="title">{{text}}</span>
-  <span *ngIf="!disabled" role="button" class="svc-action-button"
-    (click)="onClick($event)" [key2click] [attr.title]="title" [class.svc-action-button--selected]="selected" [class]="classes">{{text}}</span>
+  <ng-container *ngIf="!iconName">
+    <span *ngIf="disabled" class="svc-action-button svc-action-button--disabled" [class]="classes"
+      [attr.title]="title">{{text}}</span>
+    <span *ngIf="!disabled" role="button" class="svc-action-button" (click)="onClick($event)" [key2click]
+      [attr.title]="title" [class.svc-action-button--selected]="selected" [class]="classes">{{text}}</span>
+  </ng-container>
+  <ng-container *ngIf="iconName">
+    <span *ngIf="disabled" class="svc-action-button svc-action-button--disabled svc-action-button--icon"
+      [class]="classes" [attr.title]="title">
+      <svg [iconName]="iconName" [size]="'auto'" sv-ng-svg-icon></svg>
+    </span>
+    <span *ngIf="!disabled" class="svc-action-button svc-action-button--icon" (click)="onClick($event)" [key2click]
+      [attr.title]="title" [attr.aria-label]="text" [class]="classes" [class.svc-action-button--selected]="selected">
+      <svg [iconName]="iconName" [size]="'auto'" sv-ng-svg-icon></svg>
+    </span>
+  </ng-container>
 </ng-template>

packages/survey-creator-angular/src/components/action-button.component.ts

@@ -14,6 +14,7 @@ export class ActionButtonComponent extends EmbeddedViewContentComponent {
   @Input() disabled: boolean = false;
   @Input() text: string = "";
   @Input() title: string = "";
+  @Input() iconName: string = "";
   @Input() allowBubble: boolean = false;
   onClick(event: any) {
     this.click();

packages/survey-creator-angular/src/questions/question-link-value.component.html

@@ -1,6 +1,6 @@
 <ng-template #template>
   <svc-action-button [text]="model.linkValueText" [click]="model.doLinkClick.bind(model)" [selected]="model.isSelected"
-    [disabled]="!model.isClickable" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip">
+    [disabled]="!model.isClickable" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip" [iconName]="model.iconName">
   </svc-action-button>
   <ng-container *ngIf="!model.isReadOnly && model.showClear">
     <svc-action-button [text]="clearCaption" [click]="model.doClearClick.bind(model)" [selected]="model.isSelected"

packages/survey-creator-core/src/components/tabs/logic-ui.scss

@@ -144,15 +144,6 @@
   outline: none;
 }
 
-.svc-logic-condition-remove.svc-icon-remove {
-  display: none;
-  width: calcSize(5);
-  height: calcSize(5);
-  background-repeat: no-repeat;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
-  background-size: calcSize(3) calcSize(3);
-  background-position: center;
-}
 
 .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove {
   display: none;
@@ -163,6 +154,10 @@
   align-items: center;
   padding: 0;
 
+  .sv-svg-icon {
+    width: calcSize(3);
+    height: calcSize(3);
+  }
   use {
     fill: var(--ctr-survey-action-button-icon-color-negative, $red);
   }

packages/survey-creator-react/src/ActionButton.tsx

@@ -1,14 +1,33 @@
 import * as React from "react";
-import { attachKey2click, SurveyElementBase, } from "survey-react-ui";
+import { CssClassBuilder } from "survey-core";
+import { attachKey2click, ReactElementFactory, SurveyElementBase, SvgIcon, } from "survey-react-ui";
 
-export class ActionButton extends SurveyElementBase<any, any> {
+interface IActionButtonProps {
+  classes?;
+  click: () => void;
+  selected?: boolean;
+  disabled?: boolean;
+  text?: string;
+  title?: string;
+  iconName?: string;
+  allowBubble?: boolean;
+}
+export class ActionButton extends SurveyElementBase<IActionButtonProps, any> {
   renderElement(): JSX.Element {
-    let classes = this.props.classes + " svc-action-button";
-    if (this.props.selected) {
-      classes += " svc-action-button--selected";
+    const classes = new CssClassBuilder()
+      .append(this.props.classes)
+      .append("svc-action-button")
+      .append("svc-action-button--selected", !!this.props.selected)
+      .append("svc-action-button--disabled", !!this.props.disabled)
+      .toString();
+    if (this.props.iconName) {
+      return this.renderIcon(classes);
     }
+    return this.renderButtonText(classes);
+  }
+
+  renderButtonText(classes): JSX.Element {
     if (this.props.disabled) {
-      classes += " svc-action-button--disabled";
       return <span className={classes}>{this.props.text}</span>;
     }
     return (
@@ -31,4 +50,28 @@ export class ActionButton extends SurveyElementBase<any, any> {
       </>
     );
   }
+  renderIcon(classes): JSX.Element {
+    classes += " svc-action-button--icon";
+    if (this.props.disabled) {
+      return <span className={classes}><SvgIcon size={"auto"} iconName={this.props.iconName}></SvgIcon></span>;
+    }
+    return (
+      <>
+        {attachKey2click(
+          <span className={classes}
+            onClick={(e) => {
+              if (!this.props.allowBubble) {
+                e.stopPropagation();
+              }
+              this.props.click();
+            }}
+            title={this.props.title}
+          >
+            <SvgIcon size={"auto"} iconName={this.props.iconName}></SvgIcon>
+          </span>
+        )}
+      </>
+    );
+  }
 }
+ReactElementFactory.Instance.registerElement("svc-action-button", (props: any) => { return React.createElement(ActionButton, props); });

packages/survey-creator-react/src/QuestionLinkValue.tsx

@@ -36,6 +36,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase {
           disabled={!this.question.isClickable}
           text={this.question.linkValueText}
           title={this.question.tooltip}
+          iconName={this.question.iconName}
         ></ActionButton>
         {this.renderClear()}
       </>

packages/survey-creator-vue/src/components/ActionButton.vue

@@ -1,23 +1,42 @@
 <template>
-  <span
-    v-if="disabled"
-    class="svc-action-button svc-action-button--disabled"
-    :class="classes"
-    :title="title"
-    >{{ text }}</span
-  >
-  <span
-    role="button"
-    class="svc-action-button"
-    @click="onClick"
-    v-key2click
-    :class="getButtonCss()"
-    :title="title"
-    >{{ text }}</span
-  >
+  <template v-if="!iconName">
+    <span
+      v-if="disabled"
+      class="svc-action-button svc-action-button--disabled"
+      :class="classes"
+      :title="title"
+      >{{ text }}</span
+    >
+    <span
+      role="button"
+      class="svc-action-button"
+      @click="onClick"
+      v-key2click
+      :class="getButtonCss()"
+      :title="title"
+      >{{ text }}</span
+    >
+  </template>
+  <template v-if="iconName">
+    <span
+      v-if="disabled"
+      :class="getButtonCss()"
+      :title="title"
+      ><SvComponent :is="'sv-svg-icon'" :iconName="iconName" :size="'auto'"></SvComponent
+    ></span>
+    <span
+      role="button"
+      @click="onClick"
+      v-key2click
+      :class="getButtonCss()"
+      :title="title"
+      ><SvComponent :is="'sv-svg-icon'" :iconName="iconName" :size="'auto'"></SvComponent
+    ></span>
+  </template>
 </template>
 <script lang="ts" setup>
-import { key2ClickDirective as vKey2click } from "survey-vue3-ui";
+import { key2ClickDirective as vKey2click, SvComponent } from "survey-vue3-ui";
+import { CssClassBuilder } from "survey-core";
 const props = defineProps<{
   classes?: string;
   selected?: boolean;
@@ -26,6 +45,7 @@ const props = defineProps<{
   title?: string;
   allowBubble?: boolean;
   click: () => void;
+  iconName?: string;
 }>();
 
 const onClick = (event: Event) => {
@@ -35,6 +55,13 @@ const onClick = (event: Event) => {
   }
 };
 const getButtonCss = () => {
-  return props.classes + (props.selected ? " svc-action-button--selected" : "");
+  const buttonClasses = new CssClassBuilder()
+      .append(props.classes || "")
+      .append("svc-action-button")
+      .append("svc-action-button--icon", !!props.iconName)
+      .append("svc-action-button--selected", !!props.selected)
+      .append("svc-action-button--disabled", !!props.disabled)
+      .toString();
+  return buttonClasses;
 };
 </script>

packages/survey-creator-vue/src/questions/LinkValue.vue

@@ -7,6 +7,7 @@
     :disabled="!question.isClickable"
     :classes="question.linkSetButtonCssClasses"
     :title="question.tooltip"
+    :iconName="question.iconName"
   >
   </SvComponent>
   <SvComponent