---
title: "Breaking: Record and category icons follow the colour scheme"
manual: "Academic Programs"
version: "main"
source: "Changelog/3.0/Breaking-RecordAndCategoryIconsFollowTheColourScheme.rst"
rendered: "2026-09-19T10:44:27+00:00"
---

# Breaking: Record and category icons follow the colour scheme {#breaking-programs-record-and-category-icons-follow-the-colour-scheme}

## Description {#description}

The record icons of this extension were registered with the core provider
`\TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider`, which renders
the default markup - the markup a `typeicon_classes` entry reaches - as an
`<img>` tag. An image is opaque to CSS, so the icon kept the ink of its
file whatever the backend colour scheme said, and a dark drawing stayed dark on
the dark cards of the record list.

They are now registered with
`\FGTCLB\AcademicBase\Imaging\IconProvider\CurrentColorSvgIconProvider`,
which inlines the file in both markups, and the files themselves are drawn in
`currentColor` with no colour of their own.

That covers the academic program page type icon `academic-programs` and
the twelve category type icons of this extension, which
`EXT:category_types` registers as `category_types.programs.*`. The
twelve category types ask for it with `inlineIcon: true` in
`Configuration/CategoryTypes.yaml`; without that flag a category type
icon keeps the core provider.

Two of those twelve were Font Awesome Pro files, which this project has no
licence for. `Location.svg` and `Paying.svg` are replaced by the
Bootstrap Icons `geo-alt` and `cash-coin` (MIT, see
`Resources/Public/Icons/LICENSE-bootstrap-icons.txt`). The drawing changes
with them; the identifiers do not.

The two content elements of this extension named their icon by file path rather
than by identifier. `ExtensionManagementUtility::addPlugin()` writes that
value into `typeicon_classes` verbatim, and
`IconRegistry::registerTCAIcons()` registers icons from `ctrl.iconfile`
only, so the path was never a registered identifier and
`IconFactory::getIcon()` answered with the `default-not-found`
placeholder. They now name `academic-programs`, which is the same icon as
the page type.

## Impact {#impact}

The twelve category type icons reach the **frontend**, through
`<core:icon identifier="category_types.programs.{type}" />` in
`Partials/Program/Categories.html` and `Partials/Program/Item.html`.
Neither call asks for the `inline` markup, so their rendered markup changes: an
`<img>` of a fixed pixel size becomes an inlined `<svg>` with
`width="1em" height="1em"`, which follows the font size and the colour of
the text around it. Every site using the program plugins sees those icons resize
and recolour.

Site CSS or JavaScript that sized, coloured or addressed the `<img>` has
to address the `<svg>` instead.

In the backend, the page type icon and the twelve category type icons take the
text colour around them, so they stay legible in a dark backend colour scheme.
The two content elements show the extension icon in the page module and the
record list instead of the red not-found placeholder.

## Affected Installations {#affected-installations}

Every installation of this extension. Installations that render the program
plugins in the frontend are affected visibly, and installations that show the
**Location** or **Paying** category type see a different
drawing.

## Migration {#migration}

Replace an image selector with an element selector in the site CSS, for example

```css
/* before */
.program-categories .icon img { width: 32px; }

/* after */
.program-categories .icon svg { width: 1.25em; }
```

The icon element keeps the surrounding
`<span class="t3js-icon icon" data-identifier="…">` wrapper, so a
selector written against the wrapper needs no change.