MOBILE-3814 module: Change cloud icons to new fontawesome custom icons

src/addons/storagemanager/services/handlers/course-menu.ts

@@ -48,7 +48,7 @@ export class AddonStorageManagerCourseMenuHandlerService implements CoreCourseOp
         course: CoreCourseAnyCourseDataWithOptions,
     ): CoreCourseOptionsMenuHandlerData {
         return {
-            icon: 'cloud-download',
+            icon: 'fas-cloud-download-alt',
             title: 'addon.storagemanager.coursedownloads',
             page: 'storage/' + course.id,
             pageParams: {

src/assets/fonts/moodle/font-awesome/cloud-done.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M20.4 10C20.4 10.4575 20.3137 10.8962 20.16 11.2975C22.35 11.74 24 13.6787 24 16C24 18.6512 21.8513 20.8 19.2 20.8H5.4C2.41875 20.8 0 18.3812 0 15.4C0 13.045 1.5075 11.0425 3.6075 10.3038C3.60375 10.2025 3.6 10.1012 3.6 10C3.6 6.685 6.285 4 9.6 4C11.8238 4 13.7625 5.2075 14.8013 7.0075C15.3713 6.625 16.0613 6.4 16.8 6.4C18.7875 6.4 20.4 8.0125 20.4 10ZM4.98276 14.5878L9.03876 18.6438C9.28244 18.8875 9.67753 18.8875 9.92124 18.6439L17.0972 11.4678C17.3409 11.2241 17.3409 10.829 17.0972 10.5853L16.2148 9.70288C15.9711 9.4592 15.576 9.4592 15.3323 9.70288L9.48 15.5552L6.74768 12.8229C6.504 12.5792 6.10888 12.5792 5.86521 12.8229L4.98276 13.7054C4.73908 13.9491 4.73908 14.3441 4.98276 14.5878Z"/></svg>

src/assets/fonts/moodle/font-awesome/cloud-refresh.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M20.4 10C20.4 10.4575 20.3137 10.8962 20.16 11.2975C22.35 11.74 24 13.6787 24 16C24 18.6512 21.8513 20.8 19.2 20.8H5.4C2.41875 20.8 0 18.3812 0 15.4C0 13.045 1.5075 11.0425 3.6075 10.3038C3.60375 10.2025 3.6 10.1012 3.6 10C3.6 6.685 6.285 4 9.6 4C11.8238 4 13.7625 5.2075 14.8013 7.0075C15.3713 6.625 16.0613 6.4 16.8 6.4C18.7875 6.4 20.4 8.0125 20.4 10ZM14.6873 10.0224C13.7416 9.11858 12.4606 8.5626 11.0497 8.56007C8.13698 8.55485 5.75998 10.9274 5.76 13.8401C5.76003 16.7561 8.12395 19.1201 11.04 19.1201C12.401 19.1201 13.6417 18.6051 14.578 17.7594C14.6868 17.6611 14.692 17.492 14.5882 17.3883L13.7438 16.5439C13.6488 16.4489 13.4963 16.4435 13.3953 16.5321C12.7432 17.1043 11.9156 17.4168 11.04 17.4168C9.04263 17.4168 7.4795 15.799 7.46336 13.8709C7.44635 11.8384 9.10454 10.2464 11.0717 10.2634C11.9751 10.2712 12.8253 10.612 13.4824 11.2273L12.5936 12.1162C12.2717 12.4381 12.4996 12.9885 12.9549 12.9885H15.809C16.0912 12.9885 16.32 12.7597 16.32 12.4775V9.62333C16.32 9.1681 15.7696 8.94012 15.4477 9.26201L14.6873 10.0224Z"/></svg>

src/core/components/download-refresh/core-download-refresh.html

@@ -2,19 +2,19 @@
     <!-- Download button. -->
     <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
-        <ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon>
+        <ion-icon slot="icon-only" name="fas-cloud-download-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
-        (click)="download($event, true)" color="dark" @coreShowHideAnimation
+        (click)="download($event, true)" color="primary" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
-        <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
+        <ion-icon slot="icon-only" name="fam-cloud-refresh" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Downloaded status icon. -->
     <ion-icon *ngIf="status == statusDownloaded && canTrustDownload" class="core-icon-downloaded ion-padding-horizontal" color="success"
-        name="cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status"></ion-icon>
+        name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status"></ion-icon>
 
     <ion-spinner *ngIf="status === statusDownloading" @coreShowHideAnimation
         [attr.aria-label]="(statusTranslatable || 'core.downloading') | translate"></ion-spinner>

src/core/constants.ts

@@ -93,10 +93,10 @@ export class CoreConstants {
     static readonly NOT_DOWNLOADABLE = 'notdownloadable';
 
     // Download / prefetch status icon.
-    static readonly ICON_DOWNLOADED = 'cloud-done';
+    static readonly ICON_DOWNLOADED = 'fam-cloud-done';
     static readonly ICON_DOWNLOADING = 'spinner';
-    static readonly ICON_NOT_DOWNLOADED = 'cloud-download';
+    static readonly ICON_NOT_DOWNLOADED = 'fas-cloud-download-alt';
-    static readonly ICON_OUTDATED = 'fas-redo-alt';
+    static readonly ICON_OUTDATED = 'fam-cloud-refresh';
     static readonly ICON_NOT_DOWNLOADABLE = '';
 
     // General download and sync icons.

src/core/directives/fa-icon.ts

@@ -45,47 +45,58 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges {
      * Detect icon name and use svg.
      */
     async setIcon(): Promise<void> {
-        let library = 'ionic';
+        let library = '';
         let iconName = this.name;
+        let font = 'ionicons';
         const parts = iconName.split('-', 2);
         if (parts.length == 2) {
             switch (parts[0]) {
                 case 'far':
                     library = 'regular';
-                    iconName = iconName.substring(4);
+                    font = 'font-awesome';
                     break;
                 case 'fa':
                 case 'fas':
                     library = 'solid';
-                    iconName = iconName.substring(parts[0].length + 1);
+                    font = 'font-awesome';
                     break;
                 case 'fab':
                     library = 'brands';
-                    iconName = iconName.substring(4);
+                    font = 'font-awesome';
+                    break;
+                case 'moodle':
+                    library = 'moodle';
+                    font = 'moodle';
+                    break;
+                case 'fam':
+                    library = 'font-awesome';
+                    font = 'moodle';
                     break;
                 default:
                     break;
             }
         }
 
-        if (library != 'ionic') {
+        if (font == 'ionicons') {
-            const src = `assets/fonts/font-awesome/${library}/${iconName}.svg`;
-            this.element.setAttribute('src', src);
-            this.element.classList.add('faicon');
-
-            if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) {
-                try {
-                    await Http.get(src, { responseType: 'text' }).toPromise();
-                } catch (error) {
-                    this.logger.error(`Icon ${this.name} not found`);
-                }
-            }
-        } else {
             this.element.removeAttribute('src');
             this.logger.warn(`Ionic icon ${this.name} detected`);
+
+            return;
         }
 
-        return;
+        iconName = iconName.substring(parts[0].length + 1);
+
+        const src = `assets/fonts/${font}/${library}/${iconName}.svg`;
+        this.element.setAttribute('src', src);
+        this.element.classList.add('faicon');
+
+        if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) {
+            try {
+                await Http.get(src, { responseType: 'text' }).toPromise();
+            } catch (error) {
+                this.logger.error(`Icon ${this.name} not found`);
+            }
+        }
     }
 
     /**

src/core/features/course/components/module-summary/module-summary.html

@@ -58,7 +58,7 @@
             <ion-item lines="full" class="ion-text-wrap">
                 <ion-label>
                     <h2>
-                        <ion-icon name="cloud-done" aria-hidden="true"></ion-icon>
+                        <ion-icon name="fam-cloud-done" aria-hidden="true"></ion-icon>
                         {{ 'addon.storagemanager.downloads' | translate }}
                     </h2>
                 </ion-label>
@@ -81,7 +81,7 @@
             </ion-item>
             <ion-button fill="outline" expand="block" *ngIf="canPrefetch && displayOptions.displayPrefetch" class="ion-text-wrap"
                 (click)="prefetch()" color="primary" [disabled]="prefetchDisabled">
-                <ion-icon *ngIf="!prefetchLoading" name="cloud-done" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!prefetchLoading" name="fam-cloud-done" slot="start" aria-hidden="true"></ion-icon>
                 <ion-spinner *ngIf="prefetchLoading" slot="start" aria-hidden="true"></ion-spinner>
                 <ion-label>
                     {{ 'core.download' | translate }}

src/core/features/courses/components/course-list-item/core-courses-course-list-item.html

@@ -62,8 +62,8 @@
                         </ion-icon>
                     </span>
 
-                    <ion-icon *ngIf="prefetchCourseData.downloadSucceeded" class="core-icon-downloaded" name="cloud-done" color="success"
+                    <ion-icon *ngIf="prefetchCourseData.downloadSucceeded" class="core-icon-downloaded" name="fam-cloud-done"
-                        role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
+                        color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
                 </p>
 
                 <ion-chip color="brand" *ngIf="course.categoryname"

src/core/features/courses/components/course-progress/core-courses-course-progress.html

@@ -44,7 +44,7 @@
 
             <!-- Downloaded icon. -->
             <ion-icon *ngIf="downloadCourseEnabled && prefetchCourseData.downloadSucceeded && !showSpinner" class="core-icon-downloaded"
-                name="cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
+                name="fam-cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate"></ion-icon>
 
             <!-- Options menu. -->
             <ion-button fill="clear" color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner"