From 379974b4281a554167f5cd3c46b88ef49fc254cf Mon Sep 17 00:00:00 2001
From: Jacob Nichols <jacobnichols@form.io>
Date: Wed, 23 Jul 2025 13:30:49 -0500
Subject: [PATCH 1/2] updated circle-remove to circle-xmark for font-awesome
 icons

---
 src/templates/bootstrap3/datagrid/form.ejs      | 2 +-
 src/templates/bootstrap3/iconClass.ts           | 2 +-
 src/templates/bootstrap3/multiValueRow/form.ejs | 2 +-
 src/templates/bootstrap4/datagrid/form.ejs      | 2 +-
 src/templates/bootstrap4/iconClass.ts           | 2 +-
 src/templates/bootstrap4/multiValueRow/form.ejs | 2 +-
 src/templates/bootstrap5/datagrid/form.ejs      | 2 +-
 src/templates/bootstrap5/iconClass.ts           | 2 +-
 src/templates/bootstrap5/multiValueRow/form.ejs | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/templates/bootstrap3/datagrid/form.ejs b/src/templates/bootstrap3/datagrid/form.ejs
index 836e8c213..e2624fb07 100644
--- a/src/templates/bootstrap3/datagrid/form.ejs
+++ b/src/templates/bootstrap3/datagrid/form.ejs
@@ -50,7 +50,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td class="col-md-1">
           <button type="button" class="btn btn-default formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow">
-            <i class="{{ctx.iconClass('remove-circle')}}"></i>
+            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
           </button>
         </td>
         {% } %}
diff --git a/src/templates/bootstrap3/iconClass.ts b/src/templates/bootstrap3/iconClass.ts
index c7d1ce749..5fe3c289e 100644
--- a/src/templates/bootstrap3/iconClass.ts
+++ b/src/templates/bootstrap3/iconClass.ts
@@ -13,7 +13,7 @@ export default (iconset, name, spinning) => {
       case 'question-sign':
         name = 'question-circle';
         break;
-      case 'remove-circle':
+      case 'circle-xmark':
         name = 'times-circle-o';
         break;
       case 'new-window':
diff --git a/src/templates/bootstrap3/multiValueRow/form.ejs b/src/templates/bootstrap3/multiValueRow/form.ejs
index eedd00f5a..30e4a9a21 100644
--- a/src/templates/bootstrap3/multiValueRow/form.ejs
+++ b/src/templates/bootstrap3/multiValueRow/form.ejs
@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-default" ref="removeRow">
-      <i class="{{ctx.iconClass('remove-circle')}}"></i>
+      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
     </button>
   </td>
   {% } %}
diff --git a/src/templates/bootstrap4/datagrid/form.ejs b/src/templates/bootstrap4/datagrid/form.ejs
index 042d10ca8..4973010d0 100644
--- a/src/templates/bootstrap4/datagrid/form.ejs
+++ b/src/templates/bootstrap4/datagrid/form.ejs
@@ -51,7 +51,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td>
           <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
-            <i class="{{ctx.iconClass('remove-circle')}}"></i>
+            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
           </button>
         </td>
         {% } %}
diff --git a/src/templates/bootstrap4/iconClass.ts b/src/templates/bootstrap4/iconClass.ts
index 53b9db7d6..153551668 100644
--- a/src/templates/bootstrap4/iconClass.ts
+++ b/src/templates/bootstrap4/iconClass.ts
@@ -13,7 +13,7 @@ export default (iconset, name, spinning) => {
       case 'question-sign':
         name = 'question-circle';
         break;
-      case 'remove-circle':
+      case 'circle-xmark':
         name = 'times-circle-o';
         break;
       case 'new-window':
diff --git a/src/templates/bootstrap4/multiValueRow/form.ejs b/src/templates/bootstrap4/multiValueRow/form.ejs
index 5b6658174..cc0b1ea9d 100644
--- a/src/templates/bootstrap4/multiValueRow/form.ejs
+++ b/src/templates/bootstrap4/multiValueRow/form.ejs
@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-secondary" ref="removeRow">
-      <i class="{{ctx.iconClass('remove-circle')}}"></i>
+      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
     </button>
   </td>
   {% } %}
diff --git a/src/templates/bootstrap5/datagrid/form.ejs b/src/templates/bootstrap5/datagrid/form.ejs
index 7856db411..644f9f55b 100644
--- a/src/templates/bootstrap5/datagrid/form.ejs
+++ b/src/templates/bootstrap5/datagrid/form.ejs
@@ -51,7 +51,7 @@
         {% if (ctx.hasRemoveButtons) { %}
         <td>
           <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
-            <i class="{{ctx.iconClass('remove-circle')}}"></i>
+            <i class="{{ctx.iconClass('circle-xmark')}}"></i>
           </button>
         </td>
         {% } %}
diff --git a/src/templates/bootstrap5/iconClass.ts b/src/templates/bootstrap5/iconClass.ts
index 7227cc9fb..a5c710b53 100644
--- a/src/templates/bootstrap5/iconClass.ts
+++ b/src/templates/bootstrap5/iconClass.ts
@@ -109,7 +109,7 @@ export default (iconset: iconset, name: string, spinning: boolean) => {
             name = 'question-circle';
             biName = 'question-circle';
             break;
-        case 'remove-circle':
+        case 'circle-xmark':
             biName = 'x-circle';
             break;
         case 'new-window':
diff --git a/src/templates/bootstrap5/multiValueRow/form.ejs b/src/templates/bootstrap5/multiValueRow/form.ejs
index 5b6658174..cc0b1ea9d 100644
--- a/src/templates/bootstrap5/multiValueRow/form.ejs
+++ b/src/templates/bootstrap5/multiValueRow/form.ejs
@@ -5,7 +5,7 @@
   {% if (!ctx.disabled) { %}
   <td>
     <button type="button" class="btn btn-secondary" ref="removeRow">
-      <i class="{{ctx.iconClass('remove-circle')}}"></i>
+      <i class="{{ctx.iconClass('circle-xmark')}}"></i>
     </button>
   </td>
   {% } %}

From 7dd6be1cf968379854f01252852d6185411a5892 Mon Sep 17 00:00:00 2001
From: Jacob Nichols <jacobnichols@form.io>
Date: Wed, 23 Jul 2025 16:36:16 -0500
Subject: [PATCH 2/2] added fallback

---
 src/templates/bootstrap3/iconClass.ts |   1 +
 src/templates/bootstrap4/iconClass.ts |   1 +
 src/templates/bootstrap5/iconClass.ts | 350 ++++++++++++++------------
 3 files changed, 187 insertions(+), 165 deletions(-)

diff --git a/src/templates/bootstrap3/iconClass.ts b/src/templates/bootstrap3/iconClass.ts
index 5fe3c289e..6f443e9a0 100644
--- a/src/templates/bootstrap3/iconClass.ts
+++ b/src/templates/bootstrap3/iconClass.ts
@@ -13,6 +13,7 @@ export default (iconset, name, spinning) => {
       case 'question-sign':
         name = 'question-circle';
         break;
+      case 'remove-circle':
       case 'circle-xmark':
         name = 'times-circle-o';
         break;
diff --git a/src/templates/bootstrap4/iconClass.ts b/src/templates/bootstrap4/iconClass.ts
index 153551668..bfbaf204e 100644
--- a/src/templates/bootstrap4/iconClass.ts
+++ b/src/templates/bootstrap4/iconClass.ts
@@ -13,6 +13,7 @@ export default (iconset, name, spinning) => {
       case 'question-sign':
         name = 'question-circle';
         break;
+      case 'remove-circle':
       case 'circle-xmark':
         name = 'times-circle-o';
         break;
diff --git a/src/templates/bootstrap5/iconClass.ts b/src/templates/bootstrap5/iconClass.ts
index a5c710b53..40f0d46e4 100644
--- a/src/templates/bootstrap5/iconClass.ts
+++ b/src/templates/bootstrap5/iconClass.ts
@@ -1,170 +1,190 @@
 type iconset = 'bi' | 'fa';
 
 export default (iconset: iconset, name: string, spinning: boolean) => {
-    let biName = name;
-    switch (name) {
-        case 'cog':
-            biName = 'gear';
-            break;
-        case 'copy':
-            biName = 'back';
-            break;
-        case 'bars':
-            biName = 'list';
-            break;
-        case 'remove':
-            biName = 'trash';
-            break;
-        case 'font':
-            biName = 'type';
-            break;
-        case 'hashtag':
-            biName = 'hash';
-            break;
-        case 'th-list':
-            biName = 'menu-button-wide';
-            break;
-        case 'dot-circle-o':
-            biName = 'ui-radios';
-            break;
-        case 'plus-square-o':
-            biName = 'plus-square';
-            break;
-        case 'minus-square-o':
-            biName = 'dash-square';
-            break;
-        case 'plus-square':
-            biName = 'ui-checks';
-            break;
-        case 'phone-square':
-            biName = 'phone';
-            break;
-        case 'home':
-            biName = 'house';
-            break;
-        case 'clock-o':
-            biName = 'clock';
-            break;
-        case 'usd':
-            biName = 'currency-dollar';
-            break;
-        case 'html5':
-            biName = 'file-richtext';
-            break;
-        case 'pencil-square-o':
-            biName = 'pencil-square';
-            break;
-        case 'columns':
-            biName = 'layout-three-columns';
-            break;
-        case 'list-alt':
-            biName = 'window';
-            break;
-        case 'th-large':
-            biName = 'grid-fill';
-            break;
-        case 'folder-o':
-            biName = 'folder';
-            break;
-        case 'square-o':
-            biName = 'square';
-            break;
-        case 'user-secret':
-            biName = 'person-fill-slash';
-            break;
-        case 'folder-open':
-            biName = 'folder2-open';
-            break;
-        case 'th':
-            biName = 'grid-3x3-gap-fill';
-            break;
-        case 'tasks':
-            biName = 'view-stacked';
-            break;
-        case 'indent':
-            biName = 'text-indent-left';
-            break;
-        case 'refresh':
-            biName = 'arrow-repeat';
-            break;
-        case 'files-o':
-            biName = 'files';
-            break;
-        case 'wpforms':
-            biName = 'window-stack';
-            break;
-        case 'cube':
-            biName = 'box';
-            break;
-        case 'cubes':
-            biName = 'boxes';
-            break;
-        case 'check-square-o':
-            biName = 'check-square';
-            break;
-        case 'plus':
-            biName = 'plus-lg';
-            break;
-        case 'question-sign':
-            name = 'question-circle';
-            biName = 'question-circle';
-            break;
-        case 'circle-xmark':
-            biName = 'x-circle';
-            break;
-        case 'new-window':
-            name = 'window-restore';
-            biName = 'window-plus';
-            break;
-        case 'move':
-            name = 'arrows';
-            biName = 'arrows-move';
-            break;
-        case 'edit':
-            biName = 'pencil';
-            break;
-        case 'time':
-            biName = 'clock';
-            break;
-        case 'video':
-            biName = 'camera-video';
-            break;
-        case 'microphone':
-            biName = 'mic';
-            break;
-        case 'folder-open':
-            biName = 'folder2-open';
-            break;
-        case 'check-circle':
-            biName = 'check-circle-fill';
-            break;
-        case 'times-circle':
-            biName = 'x-circle-fill';
-            break;
-        case 'pencil':
-            biName = 'pencil-fill';
-            break;
-        case 'minus':
-            biName = 'dash';
-            break;
-        case 'circle':
-            biName = 'circle-fill';
-            break;
-        case 'search-plus':
-            biName = 'zoom-in';
-            break;
-        case 'search-minus':
-            biName = 'zoom-out';
-            break;
-        case 'hand-paper-o':
-            biName = 'hand-index';
-            break;
-        case 'undo':
-            biName = 'arrow-counterclockwise';
-            break;
-        case 'repeat':
-            biName = 'arrow-clockwise';
-            break;
+    let iconName = name;
+    if (iconset === 'bi') {
+        switch (name) {
+            case 'cog':
+                iconName = 'gear';
+                break;
+            case 'copy':
+                iconName = 'back';
+                break;
+            case 'bars':
+                iconName = 'list';
+                break;
+            case 'remove':
+                iconName = 'trash';
+                break;
+            case 'font':
+                iconName = 'type';
+                break;
+            case 'hashtag':
+                iconName = 'hash';
+                break;
+            case 'th-list':
+                iconName = 'menu-button-wide';
+                break;
+            case 'dot-circle-o':
+                iconName = 'ui-radios';
+                break;
+            case 'plus-square-o':
+                iconName = 'plus-square';
+                break;
+            case 'minus-square-o':
+                iconName = 'dash-square';
+                break;
+            case 'plus-square':
+                iconName = 'ui-checks';
+                break;
+            case 'phone-square':
+                iconName = 'phone';
+                break;
+            case 'home':
+                iconName = 'house';
+                break;
+            case 'clock-o':
+                iconName = 'clock';
+                break;
+            case 'usd':
+                iconName = 'currency-dollar';
+                break;
+            case 'html5':
+                iconName = 'file-richtext';
+                break;
+            case 'pencil-square-o':
+                iconName = 'pencil-square';
+                break;
+            case 'columns':
+                iconName = 'layout-three-columns';
+                break;
+            case 'list-alt':
+                iconName = 'window';
+                break;
+            case 'th-large':
+                iconName = 'grid-fill';
+                break;
+            case 'folder-o':
+                iconName = 'folder';
+                break;
+            case 'square-o':
+                iconName = 'square';
+                break;
+            case 'user-secret':
+                iconName = 'person-fill-slash';
+                break;
+            case 'folder-open':
+                iconName = 'folder2-open';
+                break;
+            case 'th':
+                iconName = 'grid-3x3-gap-fill';
+                break;
+            case 'tasks':
+                iconName = 'view-stacked';
+                break;
+            case 'indent':
+                iconName = 'text-indent-left';
+                break;
+            case 'refresh':
+                iconName = 'arrow-repeat';
+                break;
+            case 'files-o':
+                iconName = 'files';
+                break;
+            case 'wpforms':
+                iconName = 'window-stack';
+                break;
+            case 'cube':
+                iconName = 'box';
+                break;
+            case 'cubes':
+                iconName = 'boxes';
+                break;
+            case 'check-square-o':
+                iconName = 'check-square';
+                break;
+            case 'plus':
+                iconName = 'plus-lg';
+                break;
+            case 'question-sign':
+                name = 'question-circle';
+                iconName = 'question-circle';
+                break;
+            case 'remove-circle':
+            case 'circle-xmark':
+                iconName = 'x-circle';
+                break;
+            case 'new-window':
+                name = 'window-restore';
+                iconName = 'window-plus';
+                break;
+            case 'move':
+                name = 'arrows';
+                iconName = 'arrows-move';
+                break;
+            case 'edit':
+                iconName = 'pencil';
+                break;
+            case 'time':
+                iconName = 'clock';
+                break;
+            case 'video':
+                iconName = 'camera-video';
+                break;
+            case 'microphone':
+                iconName = 'mic';
+                break;
+            case 'folder-open':
+                iconName = 'folder2-open';
+                break;
+            case 'check-circle':
+                iconName = 'check-circle-fill';
+                break;
+            case 'times-circle':
+                iconName = 'x-circle-fill';
+                break;
+            case 'pencil':
+                iconName = 'pencil-fill';
+                break;
+            case 'minus':
+                iconName = 'dash';
+                break;
+            case 'circle':
+                iconName = 'circle-fill';
+                break;
+            case 'search-plus':
+                iconName = 'zoom-in';
+                break;
+            case 'search-minus':
+                iconName = 'zoom-out';
+                break;
+            case 'hand-paper-o':
+                iconName = 'hand-index';
+                break;
+            case 'undo':
+                iconName = 'arrow-counterclockwise';
+                break;
+            case 'repeat':
+                iconName = 'arrow-clockwise';
+                break;
+        }
     }
-    return spinning ? 'spinner-border spinner-border-sm' : `${iconset} ${iconset}-${iconset === 'bi' ? biName : name}`;
+
+    function generateIconClass() {
+        if (spinning){
+            return 'spinner-border spinner-border-sm';
+        }
+        // Handles legacy icons names. For example, fa-remove-circle was changed to fa-circle-xmark in a major version
+        // update of font-awesome. To handle cases where customers are still on a very old version of font-awesome add
+        // a fallback if statement to handle such cases
+        function handleLegacyIconNames() {
+            if (iconName === 'circle-xmark'){
+                return `${iconset}-${iconName} ${iconset}-remove-circle`
+            }
+            return `${iconset}-${iconName}`;
+        }
+
+        return `${iconset} ${handleLegacyIconNames()}`
+    }
+    return generateIconClass();
 };