From 33615d5594d18a26a3dd187d78f9e875f3588fde Mon Sep 17 00:00:00 2001 From: m2rt Date: Fri, 9 Oct 2026 15:36:39 +0300 Subject: [PATCH 1/2] feat(icon): Allow Loading A Single Icon Font Style #774 Build and export index-without-icons.css plus core's icons/{outlined,rounded,sharp,all}.css next to index.css, which still declares all three Material Symbols styles. Pin @tedi-design-system/core to 6.11.2. Document the single-style setup and the PWA precache note in Get started. --- package-lock.json | 8 ++--- package.json | 10 ++++-- src/docs/get-started.mdx | 34 +++++++++++++++++++ src/package.json | 8 ++++- src/styles/index-without-icons.scss | 5 +++ .../components/base/icon/icon.component.ts | 3 +- src/tedi/components/base/icon/icon.stories.ts | 6 +++- 7 files changed, 65 insertions(+), 9 deletions(-) create mode 100644 src/styles/index-without-icons.scss diff --git a/package-lock.json b/package-lock.json index 1e55c2aba..34c604a40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0-semantic-version", "dependencies": { "@tanstack/angular-table": "^8.21.4", - "@tedi-design-system/core": "^6.9.0" + "@tedi-design-system/core": "6.11.2" }, "devDependencies": { "@angular-devkit/build-angular": "20.3.27", @@ -12913,9 +12913,9 @@ } }, "node_modules/@tedi-design-system/core": { - "version": "6.9.0", - "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.9.0.tgz", - "integrity": "sha512-+RPnP8d9xcgabfFODJRd472JPzRIT8OR6XMd67RtbKyLOMNHKl8RwT22DCKcMnH4FEMv/v7Uay1jwgWL9Wp/Rg==", + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.11.2.tgz", + "integrity": "sha512-iYKcXyJV1KJCpcjwxN4bQVTi9jnIkvp/5bUtR8jRes2BMvTpx7PKuoFnOnjiBZmRpm2hhgiqzhP/SpvwJCRR9A==", "engines": { "node": ">=24.0.0", "npm": ">=11.0.0" diff --git a/package.json b/package.json index 30cd3af46..6e1c0036f 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,18 @@ "exports": { "./index.css": { "default": "./index.css" + }, + "./index-without-icons.css": { + "default": "./index-without-icons.css" + }, + "./icons/*.css": { + "default": "./icons/*.css" } }, "scripts": { "prepare": "husky", "start": "ng run angular-components:storybook", - "build": "ng build angular-components --configuration production && sass --load-path=node_modules src/styles/index.scss dist/index.css --style=compressed --no-source-map && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex && mkdir -p dist/fonts && cp -a node_modules/@tedi-design-system/core/fonts/* dist/fonts/", + "build": "ng build angular-components --configuration production && sass --load-path=node_modules src/styles/index.scss:dist/index.css src/styles/index-without-icons.scss:dist/index-without-icons.css --style=compressed --no-source-map && replace-in-file //fonts//g \"./fonts/\" dist/index.css dist/index-without-icons.css --isRegex && mkdir -p dist/fonts dist/icons && cp -a node_modules/@tedi-design-system/core/fonts/* dist/fonts/ && cp node_modules/@tedi-design-system/core/icons/*.css dist/icons/", "build:sb": "ng run angular-components:build-storybook && replace-in-file //fonts//g \"./fonts/\" \"dist/storybook-static/*.css\" --isRegex", "build:sb:chromatic": "ng run angular-components:build-storybook", "lint": "stylelint \"src/tedi/**/*.scss\" --fix && ng lint angular-components --fix", @@ -44,7 +50,7 @@ }, "dependencies": { "@tanstack/angular-table": "^8.21.4", - "@tedi-design-system/core": "^6.9.0" + "@tedi-design-system/core": "6.11.2" }, "devDependencies": { "@angular-devkit/build-angular": "20.3.27", diff --git a/src/docs/get-started.mdx b/src/docs/get-started.mdx index 6df2a6748..8139d6899 100644 --- a/src/docs/get-started.mdx +++ b/src/docs/get-started.mdx @@ -166,3 +166,37 @@ export const appConfig: ApplicationConfig = { ], }; ``` + +--- + +# Icon fonts + +`tedi-icon` renders [Material Symbols](https://fonts.google.com/icons) in three styles (`outlined`, +`rounded`, `sharp`), each a separate font file of roughly 350–430 KB. `index.css` declares all +three, so every style stays available. Use **one icon style** throughout your application and load +only that font: + +```json +"styles": [ + "node_modules/@tedi-design-system/angular/index-without-icons.css", + "node_modules/@tedi-design-system/angular/icons/outlined.css" +] +``` + +| Stylesheet | Font file loaded | +| ------------------------------------------------ | --------------------------------- | +| `@tedi-design-system/angular/icons/outlined.css` | `material-symbols-outlined.woff2` | +| `@tedi-design-system/angular/icons/rounded.css` | `material-symbols-rounded.woff2` | +| `@tedi-design-system/angular/icons/sharp.css` | `material-symbols-sharp.woff2` | +| `@tedi-design-system/angular/icons/all.css` | all three | + +A `tedi-icon` whose `type` has no loaded style renders its ligature text instead of the glyph. + +Browsers only download an icon font once a glyph uses it, so in a regular web app the unused styles +cost nothing at runtime. In a **PWA**, a service worker that precaches fonts caches all three, +including ones your CSS never references. The default `ngsw-config.json` puts fonts in a `lazy` +asset group, which only caches what the app requests. If you prefetch fonts, or use Workbox, exclude +the unused styles, for example `globIgnores: ['**/material-symbols-{rounded,sharp}.woff2']`. + +See the [core icons guide](https://github.com/TEDI-Design-System/core/blob/rc/docs/icons.md) for +SCSS usage and custom font paths. diff --git a/src/package.json b/src/package.json index 28ca420d1..589a51ed2 100644 --- a/src/package.json +++ b/src/package.json @@ -7,6 +7,12 @@ "exports": { "./index.css": { "default": "./index.css" + }, + "./index-without-icons.css": { + "default": "./index-without-icons.css" + }, + "./icons/*.css": { + "default": "./icons/*.css" } }, "peerDependencies": { @@ -28,7 +34,7 @@ }, "dependencies": { "@tanstack/angular-table": "^8.21.4", - "@tedi-design-system/core": "^6.8.1" + "@tedi-design-system/core": "6.11.2" }, "publishConfig": { "access": "public" diff --git a/src/styles/index-without-icons.scss b/src/styles/index-without-icons.scss new file mode 100644 index 000000000..b2096f911 --- /dev/null +++ b/src/styles/index-without-icons.scss @@ -0,0 +1,5 @@ +// index.scss without the Material Symbols icon fonts. Pair with one of the icons/