[Icon]: Allow Loading A Single Material Symbols Font Style #774

Problem

dist/index.css compiles @tedi-design-system/core/index, which declares all three Material Symbols icon fonts (outlined, rounded, sharp, ~350–430 KB each). The package exports only ./index.css, so an app that uses a single icon type cannot avoid the other two. Browsers only download an @font-face font once a glyph uses it, but PWA service workers precache every font in the build output (~1 MB).

Originally reported in TEDI-Design-System/react#41. Core added opt-in per-style entries in @tedi-design-system/core 6.10.0 (TEDI-Design-System/core#146), and React has adopted them. Angular needs the same change.

Solution

Mirror the React implementation while keeping index.css backward compatible:

• Bump @tedi-design-system/core to ^6.11.2
• Add src/styles/index-without-icons.scss (@use '@tedi-design-system/core/index-without-icons' + vertical-spacing + cdk); index.scss forwards it plus @tedi-design-system/core/icons/all, so index.css output stays the same
• build script: compile both entries (dist/index.css, dist/index-without-icons.css), run the /fonts/ → ./fonts/ rewrite on both, copy core's icons/*.css to dist/icons/ (they reference ../fonts/, which already resolves to dist/fonts/)
• package.json exports: add ./index-without-icons.css and ./icons/*.css
• Storybook keeps showing all three styles
• Docs (getting started + Icon component / type input): recommend using a single icon type, show the single-style import, add the PWA precache note

Consumer usage after the change:

// angular.json styles, or a global import
'@tedi-design-system/angular/index-without-icons.css'
'@tedi-design-system/angular/icons/outlined.css' // or rounded.css / sharp.css

For PWAs, the docs should say to exclude the unused fonts from the precache: Workbox globIgnores: ['**/material-symbols-{rounded,sharp}.woff2'], or narrower assetGroups file patterns in ngsw-config.json for the Angular service worker.

Examples and information

• React issue: [Icon]: All material symbol types are always loaded (performance concern) react#41
• Core guide: https://github.com/TEDI-Design-System/core/blob/rc/docs/icons.md
• Core entries: index-without-icons.{scss,css}, icons/{outlined,rounded,sharp,all}.{scss,css}

Project

DoD

• index.css output unchanged for existing consumers (all three icon styles still declared)
• index-without-icons.css declares no Material Symbols @font-face
• Each icons/<style>.css references exactly one woff2 that resolves in the published package
• Linter passes
• The change has passed code review
• The change has passed Chromatic visual review
• Storybook documentation updated (single icon type recommendation, import options, PWA note)
• Semantic commit format type(scope): Subject text #issue-ref is used (for semantic-release), with the issue reference required - see Commit convention