Activity icons

Activity icons are used to quickly identify the activty types

Available

4.0

Activity icon types

Moodle activity icons are single black svg icons that is stored in mod/PLUGINNAME/pix/icon.svg.

Minimal activity icons

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. Note: the icon is using the .icon css class for sizing.

Multiple choice quiz 1

Coloured activity icons

In places like the course page and the activity chooser icons have a more prominent role and they should be rendered on a coloured background in white.

The CSS classes for these icons are activityiconcontainer wrapper class with the added activity name. And the activityicon class for the image. See the template course/format/templates/local/content/cm/title.mustache for more info.

quiz

Multiple choice quiz 1

<div class="media mb-3">
    <div class="activityiconcontainer assessment mr-3">
        
<img src="https://componentlibrary.moodle.com/admin/tool/componentlibrary/content/static/moodle/components/activityicons/quiz/icon.svg" class="activityicon" alt="Quiz icon">
    </div>
    <div class="media-body align-self-center">
        <div class="text-uppercase small">quiz</div>
        <div class="activityname"><a href="#">Multiple choice quiz 1</a></div>
    </div>
</div>

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;
        ..
    }
}
 ?>

The available activity purposes are:

Administration
Assessment
Collaboration
Communication
Content
Interface
Other

each defined as ‘MOD_PURPOSE_X’, so Assessment is MOD_PURPOSE_ASSESSMENT.

Purpose colours

The activity icon colours can be customised using the theme Boost ‘Raw initial SCSS’ feature. Simply copy any of these scss variables that you want to customize, change the colour value and done! There is no background colour for the ‘Other’ type purpose, it defaults to light-grey: #f8f9fa.

$activity-icon-administration-bg: #5d63f6;
$activity-icon-assessment-bg:     #eb66a2;
$activity-icon-collaboration-bg:  #f7634d;
$activity-icon-communication-bg:  #11a676;
$activity-icon-content-bg:        #399be2;
$activity-icon-interface-bg:      #a378ff;

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 e.g. 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, use:

<?php 
$iconurl = get_fast_modinfo($courseid)->get_cm($cmid)->get_icon_url()->out(false);
 ?>

external

External tool module

Examples

admin

Administration module

quiz

wiki

choice

lesson

interface