public/admin/tool/componentlibrary/content/moodle/components/activityicons.md
Moodle activity icons are single black SVG icons that are stored in mod/PLUGINNAME/pix/monologo.svg.
The core_course\output\activity_icon class is used to render activity icons. It can be used in several ways depending on the context. Also, there is the core_course\activity_icon template that can be included directly from mustache templates.
The following example shows how to render the default activity icon:
{{< php >}} use core_course\output\activity_icon; $renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz');
echo $renderer->render($icon); {{< /php >}}
By default, the activity icon will be rendered colored with the activity purpose color (see below).
Specific activity instances can have their own custom icons. For example, the mod_resource displays the MIME type icon for the resource. To render the activity icon from a cm_info object, use the static constructor from_cm_info. The method will return an instance of activity_icon with the icon URL set to the custom icon if necessary.
It is possible to render the activity icon from a cm_info object:
{{< php >}} use core_course\output\activity_icon; $renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer(); $cminfo = get_fast_modinfo($courseid)->get_cm($cmid);
$icon = activity_icon::from_cm_info($cminfo);
echo $renderer->render($icon); {{< /php >}}
There are pages like the gradebook where the activity icons must be rendered in black color for accessibility or usability reasons. The core_course\output\activity_icon class has a set_colourize method to define if the icon must be colorized or not.
The following example shows how to render the default activity icon in black:
{{< php >}} use core_course\output\activity_icon; $renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz') ->set_colourize(false);
echo $renderer->render($icon); {{< /php >}}
When rendered in a page with limited space the icons will be shown in their original design, for example on the course gradebook where activity show in the grade table header.
The core_course\output\activity_icon class has a set_icon_size method to define the icon size. The method accepts any value from core\output\local\properties\iconsize enum.
The following example shows how to render the default activity icon with a custom size:
{{< php >}} use core_course\output\activity_icon; use core\output\local\properties\iconsize; $renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz') ->set_icon_size(iconsize::SIZE4);
echo $renderer->render($icon); {{< /php >}}
The core_course\output\activity_icon class has a set_extra_classes method to add extra classes to the icon container.
The following example shows how to render the default activity icon with extra classes:
{{< php >}} use core_course\output\activity_icon; $renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();
$icon = activity_icon::from_modname('quiz') ->set_extra_classes(['my-extra-class']);
echo $renderer->render($icon); {{< /php >}}
In the HTML for the example above you might notice the assessment css class after .activityiconcontainer. This class is the result of assigning a purpose to the quiz activity in /mod/quiz/lib.php.
{{< php >}} function quiz_supports($feature) { switch($feature) { .. case FEATURE_PLAGIARISM: return true; case FEATURE_MOD_PURPOSE: return MOD_PURPOSE_ASSESSMENT; .. } } {{< /php >}}
Since Moodle 4.4, the available activity purposes are:
The activity icon colours can be customised using the theme Boost 'Raw initial SCSS' feature. The following variables are available:
{{< highlight scss >}} $activity-icon-administration-bg: #da58ef !default; $activity-icon-assessment-bg: #f90086 !default; $activity-icon-collaboration-bg: #5b40ff !default; $activity-icon-communication-bg: #eb6200 !default; $activity-icon-content-bg: #0099ad !default; $activity-icon-interactivecontent-bg: #8d3d1b !default; {{</ highlight >}}
Some activities allow icons to be customised. This can be done by implementing callback XXX_get_coursemodule_info() returning instance of object (for instance, mod/lti/lib.php).
{{< php >}} $info = new cached_cm_info(); $info->iconurl = new moodle_url('https://moodle.org/theme/moodleorg/pix/moodle_logo_small.svg'); {{< /php >}}
To get this customised icon url, use:
{{< php >}} $iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false); {{< /php >}}
And to render the custom icon:
{{< php >}} use core_course\output\activity_icon;
echo $OUTPUT->render(activity_icon::from_cm_info($cminfo)); {{< /php >}}
<div class="d-flex mb-3"> <div class="flex-shrink-0 activityiconcontainer lti me-3"> </div> <div class="flex-grow-1 align-self-center"> <div class="text-uppercase small">external</div> <div class="activityname"><a href="#">External tool module</a></div> </div> </div>Since Moodle 4.4, a new callback has been added to the modules. Branded icons are displayed with their original colours and they are not affected by the activity purpose colours.
{{< php >}} /**