Activity icons
Activity icons are used to quickly identify the activity types
Activity icon types
Moodle activity icons are single black SVG icons that are stored in mod/PLUGINNAME/pix/monologo.svg.
Rendering activity icons
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.
Rendering the activity plugin icon
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);
?>
By default, the activity icon will be rendered colored with the activity purpose color (see below).
Rendering the activity icon from a cm_info object
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);
?>
Rendering the activity icon in dark color
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);
?>
Set the activity icon size
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);
?>
Add extra classes to the activity icon
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);
?>
Activity purposes
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;
..
}
}
?>
Since Moodle 4.4, the available activity purposes are:
- Administration (MOD_PURPOSE_ADMINISTRATION)
- Assessment (MOD_PURPOSE_ASSESSMENT)
- Collaboration (MOD_PURPOSE_COLLABORATION)
- Communication (MOD_PURPOSE_COMMUNICATION)
- Interactive content (MOD_PURPOSE_INTERACTIVECONTENT)
- Resource (MOD_PURPOSE_CONTENT)
- Other (MOD_PURPOSE_OTHER)
Purpose colours
The activity icon colours can be customised using the theme Boost ‘Raw initial SCSS’ feature. The following variables are available:
$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;Custom activity icons
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');
?>
To get this customised icon url, use:
<?php
$iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false);
?>
And to render the custom icon:
<?php
use core_course\output\activity_icon;
echo $OUTPUT->render(activity_icon::from_cm_info($cminfo));
?>
Branded icons
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
/**
* Whether the activity is branded.
* This information is used, for instance, to decide if a filter should be applied to the icon or not.
*
* @return bool True if the activity is branded, false otherwise.
*/
function h5pactivity_is_branded(): bool {
return true;
}
?>
Examples
