diff --git a/core/static/bundled/polyfill-index.ts b/core/static/bundled/polyfill-index.ts
new file mode 100644
index 00000000..96871309
--- /dev/null
+++ b/core/static/bundled/polyfill-index.ts
@@ -0,0 +1,5 @@
+import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
+
+window.addEventListener("DOMContentLoaded", () => {
+ polyfillCountryFlagEmojis();
+});
diff --git a/core/static/core/header.scss b/core/static/core/header.scss
index fd2cae8c..7cac3a3e 100644
--- a/core/static/core/header.scss
+++ b/core/static/core/header.scss
@@ -106,6 +106,7 @@ $hovered-red-text-color: #ff4d4d;
color: $text-color;
font-weight: normal;
line-height: 1.3em;
+ font-family: "Twemoji Country Flags", sans-serif;
&:hover {
background-color: $background-color-hovered;
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index ef184fbf..01f75d12 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -23,6 +23,7 @@
+
diff --git a/package-lock.json b/package-lock.json
index 012e48e7..f4d6a23c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
"3d-force-graph": "^1.73.4",
"alpinejs": "^3.14.7",
"chart.js": "^4.4.4",
+ "country-flag-emoji-polyfill": "^0.1.8",
"cytoscape": "^3.30.2",
"cytoscape-cxtmenu": "^3.5.0",
"cytoscape-klay": "^3.1.4",
@@ -3378,6 +3379,11 @@
"url": "https://opencollective.com/core-js"
}
},
+ "node_modules/country-flag-emoji-polyfill": {
+ "version": "0.1.8",
+ "resolved": "https://registry.npmjs.org/country-flag-emoji-polyfill/-/country-flag-emoji-polyfill-0.1.8.tgz",
+ "integrity": "sha512-Mbah52sADS3gshUYhK5142gtUuJpHYOXlXtLFI3Ly4RqgkmPMvhX9kMZSTqDM8P7UqtSW99eHKFphhQSGXA3Cg=="
+ },
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
diff --git a/package.json b/package.json
index 93494819..5cd4c931 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,9 @@
"keywords": [],
"author": "",
"license": "GPL-3.0-only",
- "sideEffects": [".css"],
+ "sideEffects": [
+ ".css"
+ ],
"imports": {
"#openapi": "./staticfiles/generated/openapi/index.ts",
"#core:*": "./core/static/bundled/*",
@@ -48,6 +50,7 @@
"3d-force-graph": "^1.73.4",
"alpinejs": "^3.14.7",
"chart.js": "^4.4.4",
+ "country-flag-emoji-polyfill": "^0.1.8",
"cytoscape": "^3.30.2",
"cytoscape-cxtmenu": "^3.5.0",
"cytoscape-klay": "^3.1.4",