From 1e30a80b7f9542bfe5b0d2ae67b75aba882b8b17 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 10 Feb 2023 16:19:54 +0800
Subject: [PATCH] MDL-77105 core: Conditionally apply icon filter

* Apply the filter CSS property only to activity icons
that don't have the ".nofilter" class. This will allow
activities with non-SVG icons to be rendered as they are.
---
 theme/boost/scss/moodle/icons.scss |  4 +++-
 theme/boost/style/moodle.css       | 24 ++++++++++++------------
 theme/classic/style/moodle.css     | 24 ++++++++++++------------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss
index 17bf8fe0cae..fa6baf1999c 100644
--- a/theme/boost/scss/moodle/icons.scss
+++ b/theme/boost/scss/moodle/icons.scss
@@ -151,7 +151,9 @@ $iconsizes: map-merge((
         background-color: $value;
         .activityicon,
         .icon {
-            filter: brightness(0) invert(1);
+            &:not(.nofilter) {
+                filter: brightness(0) invert(1);
+            }
         }
     }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 25b90d33880..2f188a316e0 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12475,38 +12475,38 @@ blockquote {
 
 .activityiconcontainer.administration {
   background-color: #5d63f6; }
-  .activityiconcontainer.administration .activityicon,
-  .activityiconcontainer.administration .icon {
+  .activityiconcontainer.administration .activityicon:not(.nofilter),
+  .activityiconcontainer.administration .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.assessment {
   background-color: #eb66a2; }
-  .activityiconcontainer.assessment .activityicon,
-  .activityiconcontainer.assessment .icon {
+  .activityiconcontainer.assessment .activityicon:not(.nofilter),
+  .activityiconcontainer.assessment .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.collaboration {
   background-color: #f7634d; }
-  .activityiconcontainer.collaboration .activityicon,
-  .activityiconcontainer.collaboration .icon {
+  .activityiconcontainer.collaboration .activityicon:not(.nofilter),
+  .activityiconcontainer.collaboration .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.communication {
   background-color: #11a676; }
-  .activityiconcontainer.communication .activityicon,
-  .activityiconcontainer.communication .icon {
+  .activityiconcontainer.communication .activityicon:not(.nofilter),
+  .activityiconcontainer.communication .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.content {
   background-color: #399be2; }
-  .activityiconcontainer.content .activityicon,
-  .activityiconcontainer.content .icon {
+  .activityiconcontainer.content .activityicon:not(.nofilter),
+  .activityiconcontainer.content .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.interface {
   background-color: #a378ff; }
-  .activityiconcontainer.interface .activityicon,
-  .activityiconcontainer.interface .icon {
+  .activityiconcontainer.interface .activityicon:not(.nofilter),
+  .activityiconcontainer.interface .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 :root {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 49a589c5f6b..a587cfd64d0 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12475,38 +12475,38 @@ blockquote {
 
 .activityiconcontainer.administration {
   background-color: #5d63f6; }
-  .activityiconcontainer.administration .activityicon,
-  .activityiconcontainer.administration .icon {
+  .activityiconcontainer.administration .activityicon:not(.nofilter),
+  .activityiconcontainer.administration .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.assessment {
   background-color: #eb66a2; }
-  .activityiconcontainer.assessment .activityicon,
-  .activityiconcontainer.assessment .icon {
+  .activityiconcontainer.assessment .activityicon:not(.nofilter),
+  .activityiconcontainer.assessment .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.collaboration {
   background-color: #f7634d; }
-  .activityiconcontainer.collaboration .activityicon,
-  .activityiconcontainer.collaboration .icon {
+  .activityiconcontainer.collaboration .activityicon:not(.nofilter),
+  .activityiconcontainer.collaboration .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.communication {
   background-color: #11a676; }
-  .activityiconcontainer.communication .activityicon,
-  .activityiconcontainer.communication .icon {
+  .activityiconcontainer.communication .activityicon:not(.nofilter),
+  .activityiconcontainer.communication .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.content {
   background-color: #399be2; }
-  .activityiconcontainer.content .activityicon,
-  .activityiconcontainer.content .icon {
+  .activityiconcontainer.content .activityicon:not(.nofilter),
+  .activityiconcontainer.content .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 .activityiconcontainer.interface {
   background-color: #a378ff; }
-  .activityiconcontainer.interface .activityicon,
-  .activityiconcontainer.interface .icon {
+  .activityiconcontainer.interface .activityicon:not(.nofilter),
+  .activityiconcontainer.interface .icon:not(.nofilter) {
     filter: brightness(0) invert(1); }
 
 :root {