[TASK] Reactivate usage of constructable stylesheets for icon element

With #100270 stylesheets in icon elements have been inlined instead of
using the style abstraction of lit which uses constructable stylesheets
if available.

Inline stylesheets need to be parsed over and over again, whenever a
web component is used multiple times.
The icon element is supposed to be used very often, which is why this
matters. Constructable stylesheets are cached and therefore do only
need to be parsed once, regardless how often a web component is used.

Per issue description this has been done because browsers throw a
DOMException in some (probably cross-iframe usage) situations:
> Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot':
> Sharing constructed stylesheets in multiple documents is not allowed

These situations can not be reproduced right now and web components
that use shadow dom with constructable stylesheets will continue
having to cope with this limitation, which is why we need to load the
javascript modules into the document (frame) where the component
is supposed to be used and define it in there.
We've got API like `topLevelModuleImport` to do so; also see the
following upstream comment for a similar suggestion:
lit/lit#2068 (comment))

Resolves: #101464
Related: #100270
Releases: main, 12.4
Change-Id: Id69c5c850b6e7aedf41b7fe958eaa2187a287d62
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80212
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>

Build/Sources/TypeScript/backend/element/icon-element.ts

@@ -18,7 +18,6 @@ import { until } from 'lit/directives/until';
 import { Sizes, States, MarkupIdentifiers } from '../enum/icon-types';
 import Icons, { IconStyles } from '../icons';
 import '@typo3/backend/element/spinner-element';
-import { styleTag } from '@typo3/core/lit-helper';
 
 /**
  * Module: @typo3/backend/element/icon-element
@@ -28,6 +27,8 @@ import { styleTag } from '@typo3/core/lit-helper';
  */
 @customElement('typo3-backend-icon')
 export class IconElement extends LitElement {
+  static styles = IconStyles.getStyles();
+
   @property({ type: String }) identifier: string;
   @property({ type: String, reflect: true }) size: Sizes = Sizes.default;
   @property({ type: String }) state: States = States.default;
@@ -58,7 +59,6 @@ export class IconElement extends LitElement {
     const icon = Icons.getIcon(this.identifier, this.size, this.overlay, this.state, this.markup)
       .then((markup: string) => {
         return html`
-          ${styleTag(IconStyles.getStyles())}
           <div class="icon-wrapper">
             ${unsafeHTML(markup)}
           </div>