@smartbit4all/ng-client 7.3.48 → 7.3.50

package/MIGRATION-7.0.md

@@ -2236,6 +2236,60 @@ Additive, and needs the matching platform. Nothing changes for a layout that nam
   of `resolveHtml`, `DataSheetPageApi.CONTEXT_DATA_SHEET`. See HTML-WIDGET.md, *Template-kulcs egy
   tárolt layoutban*.
 
+### Icon font: Material Symbols (7.3.30, loaded by the library from 7.3.50)
+
+From 7.3.30 the library renders its font icons — `smart-icon`, the grid, form, tree, dialog and
+filter buttons, the menus, and from 7.3.50 the navbar — with
+`fontSet="material-symbols-outlined"`. Without that font loaded, every such icon shows its
+ligature as raw text (`refresh`, `search`, `more_vert`).
+
+**On 7.3.30 – 7.3.49 the link below is mandatory.** From 7.3.50 `provideSmartNgClient()` links
+the stylesheet itself at start-up when the document does not load the font, so a host without
+the link still renders its icons. The link stays the recommended way: the browser fetches the
+font in parallel with the application, and a production build inlines the stylesheet.
+
+```html
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+/>
+```
+
+- **The library looks before it links.** A `<link>` to Material Symbols or a font face named
+  `Material Symbols Outlined` declared by an already loaded stylesheet counts as loaded, and
+  the library adds nothing. What it adds is the URL above with `&display=block`
+  (`SMART_ICON_FONT_URL`), so the ligature text stays hidden while the font arrives.
+- **`iconFont` in `SmartNgClientConfig`** sets the stylesheet the library links (a self-hosted
+  one, a mirror), and `iconFont: false` turns the linking off.
+- **A self-hosted icon font** (the `material-icons` npm package imported in `styles.css`, as
+  in p009) has its pair in the `material-symbols` package: `@import
+  'material-symbols/outlined.css';`. Set `iconFont: false` next to it: a stylesheet that loads
+  after the application started is not seen, and the library would reach for Google.
+- **A Content Security Policy** has to allow the stylesheet and the font
+  (`style-src https://fonts.googleapis.com`, `font-src https://fonts.gstatic.com`) whichever
+  side links them.
+- **Ask for the default axis values only.** The library sets no `font-variation-settings`, so
+  `@24,400,0,0` (≈320 KB) renders exactly what the full variable range
+  (`@20..48,100..700,0..1,-50..200`, ≈4 MB) would.
+- **Material Icons is the host's own business from 7.3.50.** No library icon uses the default
+  font set any more; keep its link as long as a host template has a plain `<mat-icon>`.
+- **`materialSymbolsByDefault: true`** draws those plain `<mat-icon>`s with Material Symbols
+  too, so the whole screen is one icon style and the Material Icons link can go. The host's own
+  icons turn from filled to outlined; check their names against the list below first.
+- **Filled instead of outlined** is a property of the font, not of the library. For every icon
+  at once, ask for the filled instance in the link and in `iconFont`
+  (`…:opsz,wght,FILL,GRAD@24,400,1,0`, ≈400 KB). For some icons only (an active menu item), ask
+  for the range (`@24,400,0..1,0`, ≈460 KB) and set `font-variation-settings: 'FILL' 1` where
+  wanted.
+- **Check the icon names stored as data.** 87 of the 2235 Material Icons names do not exist in
+  Material Symbols and render as raw text: brand logos, and old aliases such as
+  `info_outline`, `favorite_outline`, `bookmark_outline`, `play_circle_outline`,
+  `play_circle_filled`, `highlight_remove`, `radio_button_on`, `local_print_shop`. A source
+  search finds the ones in code; the ones in MDM entries need a look at the data.
+
+The codemod's `icon-font` rule adds the link next to a Google Material Icons link and reports a
+host that loads its icon font some other way.
+
 ### Bugfixes shipped with 7.0
 
 - (7.3.2) A view dialog no longer disappears on the browser's back button. MatDialog's default