feat: add @taiga-ui/icons-material

.github/workflows/auto-update-icons.yml

@@ -16,9 +16,15 @@ jobs:
           rm -rf ./projects/icons/src/flags && mkdir -p ./projects/icons/src/flags
           cp -R ./node_modules/@taiga-ui/design-tokens/icons/flags/* ./projects/icons/src/flags
           npx prettier ./projects/icons/src/flags --write
-      - run: |
+      - name: Lucide icons
+        run: |
           npx nx prebuild icons
           npx nx build icons
+      - name: Material icons
+        run: |
+          npx nx prebuild icons-material
+          npx nx build icons-material
+      - run: |
           npx ts-node ./scripts/generate-used-icons.ts
           npx eslint ./projects/cdk/constants/used-icons.ts --fix || echo "no file matching"
           npx eslint ./projects/demo/used-icons.ts --fix || echo "no file matching"

projects/cdk/constants/used-icons.ts

@@ -40,6 +40,7 @@ export const TUI_USED_ICONS = [
     '@tui.circle-help',
     '@tui.x',
     '@tui.chevron-right',
+    '@tui.material',
     '@tui.chevron-left',
     '@tui.calendar',
     '@tui.minus',

projects/core/tokens/icon-resolver.ts

@@ -11,10 +11,20 @@ export const TUI_ICON_START_RESOLVER = tuiCreateTokenFromFactory<
 >(() => {
     const path = inject(TUI_ASSETS_PATH);
 
-    return (icon) =>
-        !icon || icon.includes('/')
-            ? icon
-            : `${path}/${icon.replace('@tui.', '').split('.').join('/')}.svg`;
+    return (icon) => {
+        if (!icon || icon.includes('/')) {
+            return icon;
+        }
+
+        const directory = icon.includes('@tui.material') ? 'material/' : '';
+        const name = icon
+            .replace(/^@tui./, '')
+            .replace(/^material./, '')
+            .split('.')
+            .join('/');
+
+        return `${path}/${directory}${name}.svg`;
+    };
 });
 
 export function tuiInjectIconResolver(): TuiStringHandler<string> {

projects/demo/project.json

@@ -47,6 +47,11 @@
                         "glob": "**/*",
                         "input": "projects/icons/src",
                         "output": "assets/taiga-ui/icons"
+                    },
+                    {
+                        "glob": "**/*",
+                        "input": "projects/icons-material/src",
+                        "output": "assets/taiga-ui/icons/material"
                     }
                 ],
                 "baseHref": "./",

projects/demo/src/modules/app/app.routes.ts

@@ -190,10 +190,15 @@ export const ROUTES: Routes = [
         title: 'Icon',
     }),
     route({
-        path: DemoRoute.Icons,
-        loadComponent: async () => import('../components/icons'),
+        path: DemoRoute.IconsLucide,
+        loadComponent: async () => import('../icons/lucide'),
         title: 'Icons',
     }),
+    route({
+        path: DemoRoute.IconsMaterial,
+        loadComponent: async () => import('../icons/material'),
+        title: 'Icons-material',
+    }),
     route({
         path: DemoRoute.Label,
         title: 'Label ',

projects/demo/src/modules/app/demo-routes.ts

@@ -66,7 +66,8 @@ export const DemoRoute = {
     Fade: '/directives/fade',
     Sensitive: '/directives/sensitive',
     Skeleton: '/directives/skeleton',
-    Icons: '/icons',
+    IconsLucide: '/icons/lucide',
+    IconsMaterial: '/icons/material',
     InputInline: '/components/input-inline',
     Input: '/components/input',
     InputDate: '/components/input-date',

projects/demo/src/modules/app/pages.ts

@@ -99,11 +99,17 @@ export const pages: TuiDocRoutePages = [
         route: DemoRoute.Colors,
     },
     {
-        section: 'Foundations',
-        title: 'Icons',
+        section: 'Icons',
+        title: 'Lucide',
         keywords:
             'icons, icon, free, pack, lucide, markup, icons, image, картинка, свг, svg, графика',
-        route: DemoRoute.Icons,
+        route: DemoRoute.IconsLucide,
+    },
+    {
+        section: 'Icons',
+        title: 'Material',
+        keywords: 'icons, material, design, картинка, свг, svg, графика',
+        route: DemoRoute.IconsMaterial,
     },
     {
         section: 'Foundations',

projects/demo/src/modules/components/icons/index.html → projects/demo/src/modules/icons/lucide/index.html

@@ -3,7 +3,7 @@
     type="components"
 >
     <ng-template pageTab="Overview">
-        <h2 class="title">Default icons pack</h2>
+        <h2 class="title">Default (lucide) icons pack</h2>
 
         <p>
             Open source theme for Taiga UI uses processed

projects/demo/src/modules/components/icons/index.ts → projects/demo/src/modules/icons/lucide/index.ts

@@ -3,9 +3,9 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
 
+import {IconsGroup} from '../../components/icons-group/icons-group.component';
+import {IconsGroupTemplate} from '../../components/icons-group/icons-group.directive';
 import {COLORED_ICONS, MONO_ICONS} from './icons.tokens';
-import {IconsGroup} from './icons-group/icons-group.component';
-import {IconsGroupTemplate} from './icons-group/icons-group.directive';
 
 @Component({
     standalone: true,

projects/demo/src/modules/icons/material/examples/1/index.html

@@ -0,0 +1,15 @@
+<tui-icon icon="@tui.material.filled.11mp" />
+
+<img
+    alt=""
+    [src]="'@tui.material.outlined.access_alarm' | tuiIcon"
+/>
+
+<tui-icon
+    icon="@tui.material.round.brightness_medium"
+    [style.color]="'var(--tui-background-accent-1)'"
+/>
+
+<tui-icon icon="@tui.material.sharp.brush" />
+
+<tui-icon icon="@tui.material.two-tone.24mp" />

projects/demo/src/modules/icons/material/examples/1/index.less

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 0.625rem;
+}

projects/demo/src/modules/icons/material/examples/1/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiIcon, TuiIconPipe} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [TuiIcon, TuiIconPipe],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {}

projects/demo/src/modules/icons/material/examples/assets.md

@@ -0,0 +1,19 @@
+```json
+{
+  "projects": {
+    "demo": {
+      "architect": {
+        "build": {
+          "assets": [
+            {
+              "glob": "**/*",
+              "input": "node_modules/@taiga-ui/icons-material/src",
+              "output": "assets/taiga-ui/icons/material"
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+```

projects/demo/src/modules/icons/material/index.html

@@ -0,0 +1,46 @@
+<tui-doc-page
+    header="Material"
+    package="icons-material"
+    type="icons"
+>
+    <ng-template pageTab>
+        <h2 class="title">Material icons pack</h2>
+
+        <p>
+            Open source theme for Taiga UI uses processed
+            <a
+                href="https://fonts.google.com/icons?icon.set=Material+Icons"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                Material Icons.
+            </a>
+            You can browse all the icons from this pack and find the one that suits you
+            <a
+                href="https://marella.me/material-design-icons/demo/font/"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                here.
+            </a>
+        </p>
+
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [component]="1 | tuiComponent"
+            [content]="1 | tuiExample"
+        />
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <tui-doc-code code="npm i @taiga-ui/icons-material" />
+
+        <tui-doc-code
+            filename="angular.json"
+            [code]="assets"
+        />
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/icons/material/index.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDemo} from '@demo/utils';
+
+@Component({
+    standalone: true,
+    imports: [TuiDemo],
+    templateUrl: './index.html',
+    changeDetection,
+})
+export default class Page {
+    protected readonly assets = import('./examples/assets.md?raw');
+}

projects/demo/used-icons.ts

@@ -54,9 +54,6 @@ export const TUI_USED_ICONS = [
     '@tui.message-square',
     '@tui.info-filled',
     '@tui.info',
-    '@tui.electron-mono',
-    '@tui.maestro-mono',
-    '@tui.mir-mono',
     '@tui.dollar-sign',
     '@tui.paint-bucket',
     '@tui.file',
@@ -99,6 +96,9 @@ export const TUI_USED_ICONS = [
     '@tui.chevron-up',
     '@tui.play',
     '@tui.pause',
+    '@tui.electron-mono',
+    '@tui.maestro-mono',
+    '@tui.mir-mono',
     '@tui.monitor',
     '@tui.smartphone',
 ] as const;

projects/icons-material/README.md

@@ -0,0 +1,26 @@
+# Taiga UI — Icons
+
+[![npm version](https://img.shields.io/npm/v/@taiga-ui/icons.svg)](https://npmjs.com/package/@taiga-ui/icons)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@taiga-ui/icons)](https://bundlephobia.com/result?p=@taiga-ui/icons)
+[![Discord](https://img.shields.io/discord/748677963142135818?color=7289DA&label=%23taiga-ui&logo=discord&logoColor=white)](https://discord.gg/Us8d8JVaTg)
+
+[Website](https://taiga-ui.dev) • [Documentation](https://taiga-ui.dev/getting-started) •
+[Core team](https://github.com/taiga-family/taiga-ui/#core-team)
+
+> A set of vector icons used by Taiga UI
+
+It's a part of [**Taiga UI**](https://github.com/taiga-family/taiga-ui) that is fully-treeshakable Angular UI Kit
+consisting of multiple base libraries and several add-ons
+
+## How to install
+
+```
+npm i @taiga-ui/icons
+```
+
+Don't forget that Taiga UI is fully-treeshakable. **You can import even just one entity from our library** and be sure
+that there is no redundant code in your bundle. Bundlphobia badge shows size of the whole library.
+
+## Docs
+
+See our [Documentation](https://taiga-ui.dev/getting-started)

projects/icons-material/index.ts

@@ -0,0 +1 @@
+export {};

projects/icons-material/ng-package.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "assets": [
+        "src"
+    ],
+    "allowedNonPeerDependencies": [
+        "."
+    ],
+    "dest": "../../dist/icons",
+    "lib": {
+        "entryFile": "./index.ts"
+    }
+}

projects/icons-material/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "@taiga-ui/icons-material",
+    "version": "4.0.0",
+    "description": "Feather icons for Taiga UI",
+    "keywords": [
+        "angular",
+        "icon",
+        "svg",
+        "material"
+    ],
+    "homepage": "https://github.com/taiga-family/taiga-ui",
+    "repository": "https://github.com/taiga-family/taiga-ui",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@material-design-icons/svg": "0.14.13"
+    }
+}