Merge pull request #4008 from crazyserver/MOBILE-4437

Mobile 4437

src/core/components/mod-icon/mod-icon.scss

@@ -37,11 +37,12 @@
         &.version_40 {
             background-color: var(--gray-100);
 
-            --color: white;
-
             @each $type, $value in $activity-icon-background-colors {
                 &.#{$type}:not(.branded) {
                     background-color: var(--activity-40-#{$type});
+                    ::ng-deep svg, img {
+                        filter: brightness(0) invert(1);
+                    }
                 }
             }
         }
@@ -56,10 +57,10 @@
         --padding-bottom: var(--module-legacy-icon-padding, 8px);
     }
 
-    &:not(.branded) {
+    &.version_current:not(.branded) {
         ::ng-deep svg,
         ::ng-deep svg * {
-            fill: var(--color);
+            fill: var(--color) !important;
         }
     }
 

src/core/components/mod-icon/mod-icon.ts

@@ -92,7 +92,6 @@ export class CoreModIconComponent implements OnInit, OnChanges {
 
         this.modNameTranslated = CoreCourse.translateModuleName(this.modname, this.fallbackTranslation);
 
-        this.setIsBranded();
         this.setPurposeClass();
 
         await this.setIcon();
@@ -113,7 +112,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
      * @returns wether the icon does not need to be filtered.
      */
     protected async setIsBranded(): Promise<void> {
-        if (!this.colorize || this.isBranded !== undefined) {
+        if (!this.colorize) {
             // It doesn't matter.
             return;
         }
@@ -127,7 +126,6 @@ export class CoreModIconComponent implements OnInit, OnChanges {
 
         // No icon or local icon (not legacy), colorize it.
         if (!this.iconUrl || this.isLocalUrl) {
-
             // Exception for bigbluebuttonbn, it's the only one that has a branded icon.
             if (this.iconVersion === IconVersion.VERSION_4_0 && this.modname === 'bigbluebuttonbn') {
                 this.isBranded = true;
@@ -174,6 +172,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
 
         if (!this.iconUrl) {
             this.loadFallbackIcon();
+            this.setIsBranded();
 
             return;
         }
@@ -189,6 +188,8 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             !this.isLocalUrl &&
             this.getComponentNameFromIconUrl(this.iconUrl) != this.modname;
 
+        this.setIsBranded();
+
         await this.setSVGIcon();
     }