Merge branch 'MDL-84954-main' of https://github.com/ferranrecio/moodle

blocks/timeline/templates/event-list-item.mustache

@@ -54,7 +54,10 @@
             <small class="text-end text-nowrap align-self-center ms-1">
                 {{#userdate}} {{timesort}}, {{#str}} strftimetime24, core_langconfig {{/str}} {{/userdate}}
             </small>
-            <div class="activityiconcontainer small courseicon align-self-top align-self-center mx-3  mb-1 mb-sm-0 text-nowrap">
+            <div
+                class="small courseicon align-self-top align-self-center mx-2 mb-1 mb-sm-0 text-nowrap {{!
+                    }} activityiconcontainer {{#purpose}}{{purpose}}{{/purpose}}"
+            >
                 {{#icon}}
                 {{#iconurl}}
                     <img alt="{{alttext}}" title="{{alttext}}" src="{{{ iconurl }}}" class="icon {{iconclass}}">

calendar/classes/external/event_icon_exporter.php

@@ -28,6 +28,7 @@ defined('MOODLE_INTERNAL') || die();
 
 use \core\external\exporter;
 use \core_calendar\local\event\entities\event_interface;
+use core_course\output\activity_icon;
 
 /**
  * Class for displaying a calendar event's icon.
@@ -63,19 +64,25 @@ class event_icon_exporter extends exporter {
         $isuserevent = ($user && !empty($userid));
         $iconurl = '';
         $iconclass = '';
+        $purpose = '';
 
         if ($isactivityevent) {
             $key = 'monologo';
             $component = $coursemodule->get('modname');
 
-            $iconurl = get_fast_modinfo($courseid)->get_cm($coursemodule->get('id'))->get_icon_url();
-            $iconclass = $iconurl->get_param('filtericon') ? '' : 'nofilter';
-            $iconurl = $iconurl->out(false);
             if (get_string_manager()->string_exists($event->get_type(), $component)) {
                 $alttext = get_string($event->get_type(), $component);
             } else {
                 $alttext = get_string('activityevent', 'calendar');
             }
+
+            $renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
+            $activityicon = activity_icon::from_cm_info($coursemodule->get_proxied_instance())
+                ->set_title($alttext);
+
+            $iconurl = $activityicon->get_icon_url($renderer)->out(false);
+            $iconclass = $activityicon->get_icon_classes($renderer);
+            $purpose = $activityicon->get_purpose();
         } else if ($event->get_component()) {
             // Guess the icon and the title for the component event. By default display calendar icon and the
             // plugin name as the alttext.
@@ -125,6 +132,7 @@ class event_icon_exporter extends exporter {
         $data->alttext = $alttext;
         $data->iconurl = $iconurl;
         $data->iconclass = $iconclass;
+        $data->purpose = $purpose;
 
         parent::__construct($data, $related);
     }
@@ -141,6 +149,7 @@ class event_icon_exporter extends exporter {
             'alttext' => ['type' => PARAM_TEXT],
             'iconurl' => ['type' => PARAM_TEXT],
             'iconclass' => ['type' => PARAM_TEXT],
+            'purpose' => ['type' => PARAM_TEXT],
         ];
     }
 

calendar/templates/upcoming_mini.mustache

@@ -44,7 +44,10 @@
             }} data-eventtype-{{normalisedeventtype}}="1"{{!
             }} data-region="event-item"{{!
         }}>
-            <div class="activityiconcontainer small courseicon me-3">
+            <div
+                class="activityiconcontainer small courseicon me-2 {{!
+                    }}{{#purpose}}{{purpose}}{{/purpose}}"
+            >
                 {{#icon}}
                 {{#iconurl}}
                     <img alt="{{alttext}}" title="{{alttext}}" src="{{{ iconurl }}}" class="icon {{iconclass}}">

course/classes/output/activity_icon.php

@@ -135,15 +135,9 @@ class activity_icon implements renderable, templatable {
 
     #[\Override]
     public function export_for_template(renderer_base $output): array {
-        if (!isset($this->iconurl)) {
-            $this->iconurl = $this->get_icon_url($output);
-        }
-        $needfiltering = $this->colourize && $this->iconurl->get_param('filtericon');
-        $iconclass = $needfiltering ? '' : 'nofilter';
-
         $data = [
-            'icon' => $this->iconurl,
-            'iconclass' => $iconclass,
+            'icon' => $this->get_icon_url($output),
+            'iconclass' => $this->get_icon_classes($output),
             'modname' => $this->modname,
             'pluginname' => get_string('pluginname', 'mod_' . $this->modname),
             'purpose' => $this->purpose,
@@ -165,6 +159,9 @@ class activity_icon implements renderable, templatable {
      * @return url
      */
     public function get_icon_url(renderer_base $output): url {
+        if (isset($this->iconurl)) {
+            return $this->iconurl;
+        }
         $icon = $output->image_url('monologo', $this->modname);
         // Legacy activity modules may only have an `icon` icon instead of a `monologo` icon.
         $ismonologo = component::has_monologo_icon('mod', $this->modname);
@@ -174,6 +171,7 @@ class activity_icon implements renderable, templatable {
             // The name of the param is not colorize to preserve backward compatibility.
             $icon->param('filtericon', 1);
         }
+        $this->iconurl = $icon;
         return $icon;
     }
 
@@ -213,6 +211,20 @@ class activity_icon implements renderable, templatable {
         return $this->extraclasses;
     }
 
+    /**
+     * Get the icon classes.
+     *
+     * @param renderer_base $output
+     * @return string
+     */
+    public function get_icon_classes(renderer_base $output): string {
+        $result = 'activityicon icon';
+        $iconurl = $this->get_icon_url($output);
+        $needfiltering = $this->colourize && $iconurl->get_param('filtericon');
+        $result .= ($needfiltering) ? '' : ' nofilter';
+        return $result;
+    }
+
     /**
      * Get the icon size.
      *

course/templates/activity_icon.mustache

@@ -36,7 +36,7 @@
 >
     <img
         src="{{{icon}}}"
-        class="activityicon icon {{iconclass}}"
+        class="{{iconclass}}"
         data-region="activity-icon"
         alt="{{#title}}{{#cleanstr}} activityicon, moodle, {{{pluginname}}} {{/cleanstr}}{{/title}}"
         {{#title}}title="{{{title}}}"{{/title}}

theme/boost/classes/output/core_renderer.php

@@ -201,7 +201,7 @@ class core_renderer extends \core_renderer {
                 ];
                 $imagedata = html_writer::img($iconurl->out(false), '', $iconattrs);
                 $purposeclass = plugin_supports('mod', $this->page->activityname, FEATURE_MOD_PURPOSE);
-                $purposeclass .= ' activityiconcontainer icon-size-6';
+                $purposeclass .= ' activityiconcontainer me-2';
                 $purposeclass .= ' modicon_' . $this->page->activityname;
                 $isbranded = component_callback('mod_' . $this->page->activityname, 'is_branded', [], false);
                 $imagedata = html_writer::tag('div', $imagedata, ['class' => $purposeclass . ($isbranded ? ' isbranded' : '')]);

theme/boost/scss/moodle/icons.scss

@@ -192,55 +192,6 @@ img.icon {
     }
 }
 
-// Revisit these styles when MDL-78284 lands with new icons.
-// Icon container will be removed and icons will be used directly.
-.activityiconcontainer {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    .activityicon,
-    .icon {
-        margin: 0;
-        font-size: $icon-medium-height;
-        height: $icon-medium-height;
-        width: $icon-medium-width;
-        max-height: $icon-medium-height;
-        max-width: $icon-medium-width;
-    }
-    &.small {
-        width: $activity-iconcontainer-width - 10px;
-        height: $activity-iconcontainer-height - 10px;
-        max-width: $activity-iconcontainer-width - 10px;
-        max-height: $activity-iconcontainer-height - 10px;
-    }
-    &.smaller {
-        width: $activity-iconcontainer-width - 20px;
-        height: $activity-iconcontainer-height - 20px;
-        max-width: $activity-iconcontainer-width - 20px;
-        max-height: $activity-iconcontainer-height - 20px;
-        .activityicon {
-            width: $icon-medium-width;
-            height: $icon-medium-height;
-            max-width: $icon-medium-width;
-            max-height: $icon-medium-height;
-        }
-    }
-}
-
-@each $type, $value in $activity-icon-colors {
-    .activityiconcontainer.#{$type} {
-        &:not(.isbranded) {
-            .activityicon,
-            .icon {
-                &:not(.nofilter) {
-                    @include recolor-icon($value, 1);
-                }
-            }
-        }
-    }
-}
-
 .icon-box {
     width: $icon-box-width;
     height: $icon-box-height;
@@ -280,6 +231,51 @@ img.icon {
     }
 }
 
+/*
+ * Activity icons
+ */
+
+.activityiconcontainer {
+    width: $activity-iconcontainer-width;
+    height: $activity-iconcontainer-height;
+    max-width: $activity-iconcontainer-width;
+    max-height: $activity-iconcontainer-height;
+    &.small {
+        width: $activity-iconcontainer-width - 10px;
+        height: $activity-iconcontainer-height - 10px;
+        max-width: $activity-iconcontainer-width - 10px;
+        max-height: $activity-iconcontainer-height - 10px;
+    }
+    &.smaller {
+        width: $activity-iconcontainer-width - 20px;
+        height: $activity-iconcontainer-height - 20px;
+        max-width: $activity-iconcontainer-width - 20px;
+        max-height: $activity-iconcontainer-height - 20px;
+    }
+    .activityicon,
+    .icon {
+        margin: 0;
+        font-size: inherit;
+        width: inherit;
+        height: inherit;
+        max-width: inherit;
+        max-height: inherit;
+    }
+}
+
+@each $type, $value in $activity-icon-colors {
+    .activityiconcontainer.#{$type} {
+        &:not(.isbranded) {
+            .activityicon,
+            .icon {
+                &:not(.nofilter) {
+                    @include recolor-icon($value, 1);
+                }
+            }
+        }
+    }
+}
+
 // Make activtity colours available for custom modules.
 :root {
     @each $type, $value in $activity-icon-colors {

theme/boost/style/moodle.css

@@ -28834,70 +28834,6 @@ img.icon {
   align-items: center;
 }
 
-.activityiconcontainer {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-}
-.activityiconcontainer .activityicon,
-.activityiconcontainer .icon {
-  margin: 0;
-  font-size: 32px;
-  height: 32px;
-  width: 40px;
-  max-height: 32px;
-  max-width: 40px;
-}
-.activityiconcontainer.small {
-  width: 42px;
-  height: 42px;
-  max-width: 42px;
-  max-height: 42px;
-}
-.activityiconcontainer.smaller {
-  width: 32px;
-  height: 32px;
-  max-width: 32px;
-  max-height: 32px;
-}
-.activityiconcontainer.smaller .activityicon {
-  width: 40px;
-  height: 32px;
-  max-width: 40px;
-  max-height: 32px;
-}
-
-.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
 .icon-box {
   width: 60px;
   height: 48px;
@@ -28934,6 +28870,67 @@ img.icon {
   color: #fff;
 }
 
+/*
+ * Activity icons
+ */
+.activityiconcontainer {
+  width: 52px;
+  height: 52px;
+  max-width: 52px;
+  max-height: 52px;
+}
+.activityiconcontainer.small {
+  width: 42px;
+  height: 42px;
+  max-width: 42px;
+  max-height: 42px;
+}
+.activityiconcontainer.smaller {
+  width: 32px;
+  height: 32px;
+  max-width: 32px;
+  max-height: 32px;
+}
+.activityiconcontainer .activityicon,
+.activityiconcontainer .icon {
+  margin: 0;
+  font-size: inherit;
+  width: inherit;
+  height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
 :root {
   --activityadministration: #da58ef;
   --activityassessment: #f90086;

theme/classic/style/moodle.css

@@ -28834,70 +28834,6 @@ img.icon {
   align-items: center;
 }
 
-.activityiconcontainer {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-}
-.activityiconcontainer .activityicon,
-.activityiconcontainer .icon {
-  margin: 0;
-  font-size: 32px;
-  height: 32px;
-  width: 40px;
-  max-height: 32px;
-  max-width: 40px;
-}
-.activityiconcontainer.small {
-  width: 42px;
-  height: 42px;
-  max-width: 42px;
-  max-height: 42px;
-}
-.activityiconcontainer.smaller {
-  width: 32px;
-  height: 32px;
-  max-width: 32px;
-  max-height: 32px;
-}
-.activityiconcontainer.smaller .activityicon {
-  width: 40px;
-  height: 32px;
-  max-width: 40px;
-  max-height: 32px;
-}
-
-.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
-.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
-.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
-  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
-}
-
 .icon-box {
   width: 60px;
   height: 48px;
@@ -28934,6 +28870,67 @@ img.icon {
   color: #fff;
 }
 
+/*
+ * Activity icons
+ */
+.activityiconcontainer {
+  width: 52px;
+  height: 52px;
+  max-width: 52px;
+  max-height: 52px;
+}
+.activityiconcontainer.small {
+  width: 42px;
+  height: 42px;
+  max-width: 42px;
+  max-height: 42px;
+}
+.activityiconcontainer.smaller {
+  width: 32px;
+  height: 32px;
+  max-width: 32px;
+  max-height: 32px;
+}
+.activityiconcontainer .activityicon,
+.activityiconcontainer .icon {
+  margin: 0;
+  font-size: inherit;
+  width: inherit;
+  height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.activityiconcontainer.administration:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.administration:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.8549019608 0 0 0 0 0.3450980392 0 0 0 0 0.937254902 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.assessment:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.assessment:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9764705882 0 0 0 0 0 0 0 0 0 0.5254901961 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.collaboration:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.collaboration:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.3568627451 0 0 0 0 0.2509803922 0 0 0 0 1 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.communication:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.communication:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.9215686275 0 0 0 0 0.3843137255 0 0 0 0 0 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.content:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.content:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.6 0 0 0 0 0.6784313725 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
+.activityiconcontainer.interactivecontent:not(.isbranded) .activityicon:not(.nofilter),
+.activityiconcontainer.interactivecontent:not(.isbranded) .icon:not(.nofilter) {
+  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="recolor" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 0.5529411765 0 0 0 0 0.2392156863 0 0 0 0 0.1058823529 0 0 0 1 0 "/></filter></svg>#recolor');
+}
+
 :root {
   --activityadministration: #da58ef;
   --activityassessment: #f90086;