MOBILE-4502 icons: Add fontawesome styles and treat all tags as icons

src/core/directives/format-text.ts

@@ -465,7 +465,6 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
         const videos = Array.from(div.querySelectorAll('video'));
         const iframes = Array.from(div.querySelectorAll('iframe'));
         const buttons = Array.from(div.querySelectorAll<HTMLElement>('.button'));
-        const icons = Array.from(div.querySelectorAll('i.fa,i.fas,i.far,i.fab'));
         const elementsWithInlineStyles = Array.from(div.querySelectorAll<HTMLElement>('*[style]'));
         const stopClicksElements = Array.from(div.querySelectorAll<HTMLElement>('button,input,select,textarea'));
         const frames = Array.from(
@@ -546,6 +545,7 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
         });
 
         // Handle Font Awesome icons to be rendered by the app.
+        const icons = Array.from(div.querySelectorAll('.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands'));
         icons.forEach((icon) => {
             CoreIcons.replaceCSSIcon(icon);
         });

src/core/features/course/tests/behat/communication.feature

@@ -2,7 +2,8 @@
 Feature: Use custom communication link in course
 
   Background:
-    Given the following "users" exist:
+    Given the Moodle site is compatible with this feature
+    And the following "users" exist:
       | username | firstname | lastname | email                |
       | teacher1 | Teacher   | 1        | teacher1@example.com |
       | student1 | Student   | 1        | student1@example.com |

src/core/singletons/icons.ts

@@ -112,9 +112,20 @@ export class CoreIcons {
                 return;
             }
 
-            const firstPart = faPart[1].split('-')[0];
+            const afterFa = faPart[1];
 
-            switch (firstPart) {
+            const specialClasses = ['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', 'fw', 'sharp', 'rotate',
+                '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x',
+                'flip-horizontal', 'flip-vertical', 'flip-both', 'spin', 'pulse', 'inverse',
+                'border', 'pull-left', 'pull-right', 'fixed-width', 'list-item', 'bordered', 'spinning',
+                'stack', 'stack-1x', 'stack-2x', 'inverse', 'sr-only', 'sr-only-focusable', 'border'];
+
+            // Class is defining special cases.
+            if (afterFa && specialClasses.includes(afterFa)) {
+                return;
+            }
+
+            switch (afterFa) {
                 // Class is defining library.
                 case 'solid':
                     library = 'solid';
@@ -126,20 +137,9 @@ export class CoreIcons {
                 case 'brands':
                     library = 'brands';
                     break;
-                // Class is defining special cases.
-                case '2xs':
-                case 'xs':
-                case 'sm':
-                case 'lg':
-                case 'xl':
-                case '2xl':
-                case 'fw':
-                case 'sharp':
-                case 'rotate':
-                    return;
                 // Class is defining the icon name (fa-ICONNAME).
                 default:
-                    iconName = faPart[1];
+                    iconName = afterFa;
                     break;
             }
         });

src/core/tests/behat/fontawesome.feature

@@ -0,0 +1,21 @@
+@core @app @javascript
+Feature: Fontawesome icons are correctly shown in the app
+
+  Background:
+    Given the Moodle site is compatible with this feature
+    And the following "users" exist:
+      | username |
+      | student1 |
+    And the following "courses" exist:
+      | fullname | shortname |
+      | Course 1 | C1        |
+    And the following "course enrolments" exist:
+      | user     | course | role    |
+      | student1 | C1     | student |
+    And the following "activities" exist:
+      | activity   | idnumber | course | name  | intro | printlastmodified | content |
+      | page       | page     | C1     | Page  | -     | false             | <i class="fa fa-user"></i><span class="fas fa-hippo"></span><i class="fa-solid fa-poo"></i><i class="fa-regular fa-snowflake fa-10x"></i><i class="fa-brands fa-creative-commons"></i><i class="fa fa-bomb fa-flip-both"></i> |
+
+  Scenario: View fontawesome icons in the app
+    Given I entered the page activity "Page" on course "Course 1" as "student1" in the app
+    Then the UI should match the snapshot