feat(icon): Allow Loading A Single Icon Font Style #774

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",

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"
+]
+```
+
+Each stylesheet loads one font file:
+
+- `@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.

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"

src/styles/index-without-icons.scss

@@ -0,0 +1,5 @@
+// index.scss without the Material Symbols icon fonts. Pair with one of the icons/<style>.css
+// entries to load a single icon font instead of all three. See angular#774.
+@use "@tedi-design-system/core/index-without-icons";
+@use "vertical-spacing";
+@use "cdk";

src/tedi/components/base/icon/icon.component.ts

@@ -82,7 +82,8 @@ export class IconComponent {
   variant = input<IconVariant>("outlined");
   /**
    * Type of Material Symbols icon style.
-   * It is recommended to only use one type throughout your app.
+   * It is recommended to only use one type throughout your app, and to load only that type's font
+   * (`icons/<type>.css` with `index-without-icons.css`) instead of all three via `index.css`.
    * @default outlined
    */
   type = input<IconType>("outlined");

src/tedi/components/base/icon/icon.stories.ts

@@ -34,7 +34,11 @@ const BACKGROUNDS = [
  * <a href="https://www.tedi.ee/1ee8444b7/p/28835d-icon" target="_BLANK">Zeroheight ↗</a><hr/>
  * <a href="https://fonts.google.com/icons?icon.set=Material+Icons" target="_BLANK">Official Google Material Icons homepage icons ↗</a><br/>
  * <a href="https://www.figma.com/community/file/1014241558898418245/material-design-icons?searchSessionId=lvxhc4l5-a6 target="_BLANK">Material Icons Figma ↗</a><br/>
- * <a href="https://www.figma.com/community/plugin/740272380439725040/material-design-icons" target="_BLANK">Figma Material Symbols plugin ↗</a>
+ * <a href="https://www.figma.com/community/plugin/740272380439725040/material-design-icons" target="_BLANK">Figma Material Symbols plugin ↗</a><hr/>
+ *
+ * Use a single icon `type` throughout your application. Each type is a separate font file, so add
+ * `index-without-icons.css` together with only the style you use (e.g. `icons/outlined.css`) to your styles instead of
+ * `index.css`. See [Get started](/docs/documentation-get-started--get-started) for details and the PWA precache note.
  */
 
 export default {