How to setup icons for content elements or plugins in a TYPO3 extension

Question

How are icons configured for content elements and plugins? Is there a shortcut to make it possible to configure it only once and not in 3 places?

AFAIK, there are 3 places to configure icons when creating new custom content elements & plugins in the TYPO3 backend:

1. New Content Element wizard
2. What is visible in the CType / list_type select list when you edit the content element (CE)

3. What is visible in the Page Layout view

Answer 1

I am not aware of any shortcuts, this is the way I do it.

First, register an icon identifier to reference your icon, see official TYPO3 documentation: Icon API > Registration.

You can register for example SVG icons or Font Awesome icons.

---

Next, make sure the icon is configured correctly in these 3 places:

1. New Content Element (CE) wizard

Is configured in Page TSconfig

e.g. (use the previously registered icon identifier)

mod.wizards.newContentElement.wizardItems.common.show:=addToList(extkey_plugin)
mod.wizards.newContentElement.wizardItems.common.elements.extkey_plugin {
  iconIdentifier = my-icon
  # ...
}

TYPO3 documentation: Add content elements to the Content Element Wizard

---

2. CType / list_type select list:

For Extbase plugins this is configured via registerPlugin (parameter 4)

Configuration/TCA/Overrides/tt_content.php:

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
    'ExtkeyInCamelCase', 
    'PluginIdentifier', 
    'plugin title', 
    // icon 
    'my-icon');

TYPO3 documentation: Extbase Plugin registration

For content elements, this can be configured via TCA:

Configuration/TCA/Overrides/tt_content.php:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'tt_content',
'CType',
[
    'Title',
    // plugin signature: extkey_identifier
    'myext_plugin',
    // icon identifier
    'my-icon',

TYPO3 documentation: Register the content element

---

3. In the Page Layout view:

For content elements, you can set it in TCA:

Configuration/TCA/Overrides/tt_content.php:

$GLOBALS['TCA']['tt_content']['ctrl']['typeicon_classes'][$pluginname] = 'my-icon';

TYPO3 documentation: typeicon_classes

AFAIK it is not possible to change this for plugins, the default plugin icon is used. But you can add an icon within the plugin content to be displayed in the Page Layout view with a hook, e.g. look in news or calendarize extension for examples, add your function in

ext_localconf.php:

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['list_type_Info']['extkey_plugin']['extkey'] =
  \Vendor\Extkey\Hooks\PageLayoutView::class . '->getExtensionSummary';

custom: