Icons and CSS class names

Two things about the editing surface are decided by the installation rather than by the extension: which glyph each action draws, and which CSS classes each kind of element carries. Both are configured in one place.

config/system/additional.php

$GLOBALS['TYPO3_CONF_VARS']['modern_extbase_frontend_edit'] = [
    'icons' => [
        'edit' => 'actions-open',
    ],
    'classes' => [
        'button' => 'button',
        'buttonPrimary' => 'button--primary',
        'control' => 'form-control',
    ],
];

Nothing here is required. Configured with nothing at all, the surface draws the icons the extension ships and carries only its own class names.

Note

This is deliberately a low level seam. TYPO3_CONF_VARS is global, so the configuration cannot differ per site, per page or per plugin instance.

Making the surface look like the site

The most useful thing this does is let the surface pick up a theme's own button and form styling instead of imitating it. The classes are added to the extension's own, never replacing them:

'classes' => [
    'button' => 'button',
    'buttonPrimary' => 'button--primary',
    'buttonDanger' => 'button--danger',
    'buttonIconOnly' => 'button--icon',
    'control' => 'form-control',
    'label' => 'form-label',
    'errors' => 'form-errors',
    'filePicker' => 'file-picker',
],

The element types that may be configured:

Element type	What it is
`record`	One record: the profile, or one child of it.
`child`	One entry of a child collection.
`field`	One field row: label, value, action.
`label`	The label of a field.
`value`	The stored value, while it is not being edited.
`control`	The input, textarea or select a field is edited with.
`button`	Every button the surface draws.
`buttonPrimary`	Additionally, the button that commits a pending change.
`buttonDanger`	Additionally, a button that destroys something.
`buttonIconOnly`	Additionally, a button drawn as a glyph with a hidden label.
`filePicker`	The label that opens the image picker.
`errors`	The list of validation messages.
`state`	The badge on a hidden record.

An unknown element type is ignored rather than carried into the page, so a typo cannot look as though it worked.

Replacing an icon

Each action is drawn from an icon identifier, resolved through TYPO3's icon registry on the server. There are two ways to change one.

Point the action at a different icon:

'icons' => [
    'edit' => 'actions-open',
],

Or keep the identifier and re-register it from an extension of your own, which replaces the glyph everywhere it is used:

EXT:my_extension/Configuration/Icons.php

return [
    'modern-extbase-frontend-edit-edit' => [
        'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
        'source' => 'EXT:my_extension/Resources/Public/Icons/pencil.svg',
    ],
];

Neither needs a JavaScript build.

The configurable actions are edit, editRecord, apply, cancel, add, remove, chooseImage, moveUp, moveDown, moveToTop, moveToBottom, hide and show.

Note

An identifier that is not registered leaves the button without a glyph. It keeps its label and stays usable, so a mistyped identifier costs one icon rather than the surface.

An icon registered with the sprite provider — which is how TYPO3's own actions-* icons are registered — is drawn as a reference into a sprite file. That works, but such an icon does not follow the colour of the button it sits in, so the emphasised and destructive buttons will show it in the plain text colour. Icons registered with \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider do not have that limitation.