A3: Custom icons do not appear in the context menu

Hello, I noticed that setting/defining the icons in a custom module does not work nor when it is added it via the global list in modules/@apostrophecms/asset/lib/globalIcons.js

I am using the latest Apostrophe version 3.14.2.

module.exports = {
	extend: '@apostrophecms/widget-type',
	options: {
		label: 'Container',
		icon: 'plus-box'
	},
	icons: {
		'plus-box': 'PlusBox'
	}
}

[BoDonkey]

So, not a direct example like this using the rich-text-widget, but it is documented in two places.

For the init(self) it is in the reference section: https://v3.docs.apostrophecms.org/reference/module-api/module-overview.html

For the icon registration: https://v3.docs.apostrophecms.org/reference/module-api/module-options.html#icon

Not sure how to make it easier to navigate or another piece of documentation that would help. Any suggestions?

[BoDonkey]

Hi @waldemar-p, For visibility reasons, it is usually better to start a new issue, rather than making comments on a closed one.

Onto your problem! So I would make a few changes in your code. I don’t think you can extend the globalIcons.js in that way. Instead, register the icon right in your /modules/@apostrophecms/rich-text-widget/index.js file. After the options add:

icons: {
  'size-s-icon': 'SizeS'
}

Although your code seems to be working, I would also refactor your project-level rich-text-widget configuration. Remove the require and the editorTools section from the options. Instead, move them to an init() section:

module.exports = {
  init(self) {
    self.options.editorTools = {
      ...self.options.editorTools,
      slant: {
        component: 'AposTiptapButton',
        label: 'apostrophe:richTextStrikethrough',
        icon: 'size-s-icon',
        command: 'toggleStrike'
      }
    };
  },
  options: {
    ...
  },
  icons: {
    'size-s-icon': 'SizeS'
  }
};

Hope this helps!