diff --git a/.changeset/orange-shirts-bake.md b/.changeset/orange-shirts-bake.md
new file mode 100644
index 0000000000..192559cde5
--- /dev/null
+++ b/.changeset/orange-shirts-bake.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Introduce workaround for admonition icons of MkDocs.
diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index dc76aa3fdd..dc2a30f5b0 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/plugins/techdocs/src/reader/components/Reader.tsx
@@ -137,6 +137,41 @@ export const Reader = ({ entityId, onReady }: Props) => {
padding-top: 0;
}
}
+ `,
+ }),
+ injectCss({
+ // Admonitions and others are using SVG masks to define icons. These
+ // masks are defined as CSS variables.
+ // As the MkDocs output is rendered in shadow DOM, the CSS variable
+ // definitions on the root selector are not applied. Instead, the have
+ // to be applied on :host.
+ // As there is no way to transform the served main*.css yet (for
+ // example in the backend), we have to copy from main*.css and modify
+ // them.
+ css: `
+ :host {
+ --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,');
+ }
+ :host {
+ --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,');
+ }
+ :host {
+ --md-details-icon: url('data:image/svg+xml;charset=utf-8,');
+ }
+ :host {
+ --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,');
`,
}),
]);