feat: icon abstraction layer for PS 1.6-9.x compatibility

Add esIcon() JS helper and renderIcon() PHP helper that auto-detect
the icon framework (Material Icons on PS 8+/9+, FontAwesome 4 on PS
1.6/1.7) and render appropriate HTML. Includes bidirectional mapping
between FA4 class names and Material Icons names.

- Replace all hardcoded <i class="material-icons"> with esIcon()/renderIcon()
- Add FA4_MAP (Material→FA4) and reverse FA4→Material mapping in both JS and PHP
- Add detectIconMode() with PHP data-attribute hint and font-family probe fallback
- Fix 4 self/this scope bugs in esIcon calls across _methods.js, _tree.js, _preview.js
- Add esIconUpdate() for dynamically updating existing icon elements
- Add normalizeIconName() to handle both FA4 and Material input formats

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sources/scss/components/_chips.scss

@@ -332,7 +332,7 @@
             color: darken($es-primary, 10%);
         }
 
-        i.material-icons {
+        i {
             font-size: 14px;
         }
     }
@@ -831,7 +831,7 @@
             color: $es-text-secondary;
         }
 
-        i.material-icons {
+        i {
             font-size: 18px;
         }
     }
@@ -853,7 +853,7 @@
         color: $es-text-muted;
         font-size: $es-font-size-sm;
 
-        i.material-icons {
+        i {
             font-size: 20px;
         }
 
@@ -868,7 +868,7 @@
         padding: $es-spacing-xl 0;
         color: $es-text-muted;
 
-        i.material-icons {
+        i {
             font-size: 48px;
             opacity: 0.4;
             margin-bottom: $es-spacing-sm;
@@ -978,7 +978,7 @@
         border-bottom: 1px solid $es-border-color;
         background: $es-slate-50;
 
-        i.material-icons {
+        i {
             font-size: 18px;
             color: $es-text-muted;
         }

sources/scss/components/_entity-selector.scss

@@ -261,7 +261,7 @@
             color: $es-primary;
         }
 
-        .material-icons {
+        > i {
             font-size: 20px !important;
         }
     }

sources/scss/components/_list-preview.scss

@@ -579,7 +579,6 @@
     }
 
     // Icon styles
-    > .material-icons,
     > i:first-child {
         flex-shrink: 0;
         width: 16px;
@@ -639,7 +638,7 @@
         opacity: 0.8;
     }
 
-    .material-icons {
+    > i {
         font-size: 12px;
         line-height: 1;
     }

sources/scss/components/_modal.scss

@@ -24,8 +24,8 @@
     }
 }
 
-// Modal container
-.mpr-modal {
+// Modal container (exclude Bootstrap .modal to prevent collision)
+.mpr-modal:not(.modal) {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -337,7 +337,7 @@
         color: $es-text-primary;
         margin: 0;
 
-        i.material-icons {
+        i> i {
             font-size: 20px;
             color: $es-primary;
         }
@@ -392,7 +392,7 @@
         padding: $es-spacing-xl 0;
         color: $es-text-muted;
 
-        i.material-icons {
+        i> i {
             font-size: 48px;
             opacity: 0.5;
             margin-bottom: $es-spacing-md;

sources/scss/components/_schedule.scss

@@ -329,7 +329,7 @@
             background: $es-slate-200;
         }
 
-        .material-icons {
+        > i {
             color: $es-slate-400;
             font-size: 20px;
         }
@@ -357,7 +357,7 @@
     border-radius: $es-radius-full;
     white-space: nowrap;
 
-    .material-icons {
+    > i {
         font-size: 14px;
         opacity: 0.7;
     }

sources/scss/components/_tooltip.scss

@@ -17,13 +17,13 @@
     vertical-align: middle;
     margin-left: 0.25rem;
 
-    .material-icons {
-        font-size: 16px;
+    > i {
+        font-size: 14px;
         color: $es-text-muted;
         transition: color 0.15s ease;
     }
 
-    &:hover .material-icons {
+    &:hover > i {
         color: $es-primary;
     }
 }
@@ -92,7 +92,7 @@
     line-height: 1;
     transition: background-color 0.15s ease;
 
-    .material-icons {
+    > i {
         font-size: 16px;
         color: $es-text-muted;
     }
@@ -100,7 +100,7 @@
     &:hover {
         background: $es-slate-100;
 
-        .material-icons {
+        > i {
             color: $es-slate-700;
         }
     }