TYPO3 Core

Affects TYPO3 CMS Version 8.7.x (composer), current master.

As an integrator I would expect buttons containing icons added to TYPO3\CMS\Backend\Template\Components\ButtonBar to have

• a consistent look
• the same color as button text (if rendered)

FontAwesome/SVG Icons, 'btn-default'¶

$icon1 = $this->view->getModuleTemplate()->getIconFactory()->getIcon('fa-desktop', Icon::SIZE_SMALL);
$button1 = $this->buttonBar->makeLinkButton()
     ...
    ->setTitle('Button 1')
    ->setShowLabelText(true)
    ->setIcon($icon);
$this->buttonBar->addButton($button1, ButtonBar::BUTTON_POSITION_LEFT, 1);

$icon2 = $this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-close', Icon::SIZE_SMALL);
$button2 = $this->buttonBar->makeLinkButton()
     ...
    ->setTitle('Button 2')
    ->setShowLabelText(true)
    ->setIcon($icon);
$this->buttonBar->addButton($button2, ButtonBar::BUTTON_POSITION_LEFT, 1);

Problem: button1 (FontAwesome) has color: #333; (.btn-default from backend.css), button2 (SVG) has color #000.

Solution: Add CSS to style FA icons in buttons (.btn-default > .t3js-icon .fa { color: #000000; })

Custom BS button class¶

$icon1 = $this->view->getModuleTemplate()->getIconFactory()->getIcon('fa-desktop', Icon::SIZE_SMALL);
$button1 = $this->buttonBar->makeLinkButton()
     ...
    ->setTitle('Button 1')
    ->setShowLabelText(true)
    ->setClasses('btn-danger')
    ->setIcon($icon);
$this->buttonBar->addButton($button1, ButtonBar::BUTTON_POSITION_LEFT, 1);

$icon2 = $this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-close', Icon::SIZE_SMALL);
$button2 = $this->buttonBar->makeLinkButton()
     ...
    ->setTitle('Button 2')
    ->setShowLabelText(true)
    ->setClasses('btn-success')
    ->setIcon($icon);
$this->buttonBar->addButton($button2, ButtonBar::BUTTON_POSITION_LEFT, 1);

1. All FA icons are missing the special button color (.btn-primary > .t3js-icon .fa, .btn-success > .t3js-icon .fa, .btn-info > .t3js-icon .fa, .btn-warning > .t3js-icon .fa, .btn-danger > .t3js-icon .fa { color: #ffffff; });

2. SVG icons imho can't be altered by CSS. A possible solution would be to alter TYPO3\CMS\Backend\Template\Components\Buttons\LinkButton->render() to render SVG button icons as 'inline' ($this->getIcon()->render(SvgIconProvider::MARKUP_IDENTIFIER_INLINE)) so the existing .icon-color { fill: currentColor; } rule (from backend.css) is applied.