API: icons and brand

The Moodle icon ids with the Font Awesome name each version draws them with, and the colours and logo of the Didactika theme.

Icons

/api/icons.json maps every icon id Moodle knows to the Font Awesome name each version draws it with. Moodle 5.x and 4.5 use Font Awesome 6; 4.1 uses Font Awesome 4.7, so the same id can have a different name (circle-plus or file-o).

{
  "versions": [{"id": "v53", "family": "fa6"}, {"id": "v45", "family": "fa6"}, {"id": "v41", "family": "fa4"}],
  "icons": {
    "a/add_file": {"v53": "circle-plus", "v45": "circle-plus", "v41": "file-o"}
  }
}

An icon id is <group>/<name>: t/ for the icons of tools, i/ for the icons of items, a/ for actions, e/ for the editor. In a Moodle template it is written {{#pix}}t/add, core{{/pix}}; in PHP, $OUTPUT->pix_icon('t/add', get_string('add')).

const root = 'https://moodle-design.didactika.org';
const {versions, icons} = await (await fetch(root + '/api/icons.json')).json();

const family = Object.fromEntries(versions.map((v) => [v.id, v.family]));
const name = icons['t/edit'].v41;                       // a name of Font Awesome 4.7
const html = family.v41 === 'fa4' ? `<i class="fa fa-${name}"></i>` : `<i class="fa-solid fa-${name}"></i>`;

A name that starts with regular or brands already carries its family. An id with no entry for a version has no icon there: do not draw one by hand. The rule is the same everywhere in this system: icons come from Moodle, never drawn for a plugin. If a plugin needs an icon that Moodle does not have, it ships an SVG in pix/ and calls it with pix_icon of its own component.

Brand

/api/brand.json holds the palette of the Didactika theme and its assets:

const brand = await (await fetch(root + '/api/brand.json')).json();
console.log(brand.roles.primary, brand.assets.logo);

The roles are what the “Didactika theme” switch of the header applies; to recolour with something else, change the Bootstrap variables, never the components. Every role reaches 4.5:1 with white text (the light role is the exception: it takes dark text).