Hello Lisa,

Atto icon images should be able to overridden by a theme. The proper way to do this would be to create a new theme with a new set of images. See Using images in a theme.

Daniel

At the moment I'm working on developing a theme based on Boost for Moodle v3.4, and I'm also trying to figure out a standard way to change the icons for some of the Atto buttons.

In non-boost themes, we could do this just by adding the new icons in the pix_plugins folder in the theme.

In boost-based themes, using fontawesome icon system, things are a bit different.

In atto plugins that add the button as (ie, using image icons):

this.addButton({
    icon: 'icon',
    iconComponent: 'atto_designelements'
    callback: this._displayDialogue
});

These can be overridden in the theme by adding the new icons in the pix_plugins folder or defining the icon map in a class that extends the \core\output\icon_system_fontawesome class. See Essential theme for how its done.

In the icon map you could do something like the following to change the button icon:

$iconmap['atto_designelements:icon'] = 'fa-font';

However, some atto plugins already use the fontawesome icons for their buttons and these can be overridden in the theme icon map, but not via the pix_plugins method. But the problem I face is that it is not consistent (at least thats what I found). Some atto plugins use the core icon set, eg:

this.addBasicButton({
      exec: 'removeFormat',
      icon: 'e/clear_formatting'
});

In such cases, we have to do

$iconmap['core:e/clear_formatting'] = 'fa-eraser';

to update the Atto button icon but this also updates the core icon as well.

The following does not work. Or am I doing something wrong???

$iconmap['atto_clear:icon'] = 'fa-eraser';

So it becomes quite a laborious task to override atto icons, as you have to first find out which icon is used and this information is buried in several layers of folders.

If there is an easier way then I would surely like to know that.

Thanks,
... Rajneel