UI Component library
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)
NOTE: On Moodle 4.3 downwards, MOD_PURPOSE_INTERFACE was also available, but it has been deprecated, so it’s not recommended to use it.
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
