chore(demo): improve icons documentation (#9268)

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

@@ -2,7 +2,6 @@ export const SEE_ALSO_GROUPS: ReadonlyArray<readonly string[]> = [
     ['Tooltip', 'Hint', 'HintManual', 'HintPointer'],
     ['LineChart', 'LineDaysChart'],
     ['PrimitiveTextfield', 'Input', 'Textarea'],
-    ['Icon', 'Icons — Lucide', 'Icons — Material', 'Icons — FontAwesome'],
     [
         'InputDate',
         'InputDateRange',

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

@@ -189,21 +189,6 @@ export const ROUTES: Routes = [
         loadComponent: async () => import('../components/icon'),
         title: 'Icon',
     }),
-    route({
-        path: DemoRoute.IconsLucide,
-        loadComponent: async () => import('../icons/icons'),
-        title: 'Icons — Lucide',
-    }),
-    route({
-        path: DemoRoute.IconsMaterial,
-        loadComponent: async () => import('../icons/material'),
-        title: 'Icons — Material',
-    }),
-    route({
-        path: DemoRoute.IconsFontawesome,
-        loadComponent: async () => import('../icons/font-awesome'),
-        title: 'Icons — FontAwesome',
-    }),
     route({
         path: DemoRoute.Label,
         title: 'Label',

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

@@ -68,9 +68,6 @@ export const DemoRoute = {
     Fade: '/directives/fade',
     Sensitive: '/directives/sensitive',
     Skeleton: '/directives/skeleton',
-    IconsLucide: '/icons/lucide',
-    IconsMaterial: '/icons/material',
-    IconsFontawesome: '/icons/font-awesome',
     InputInline: '/components/input-inline',
     Input: '/components/input',
     InputDate: '/components/input-date',

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

@@ -104,26 +104,6 @@ export const pages: TuiDocRoutePages = [
         keywords: 'layout, верстка, palette, markup, цвет, палитра',
         route: DemoRoute.Colors,
     },
-    {
-        section: 'Icons',
-        title: 'Lucide',
-        keywords:
-            'icons, icon, free, pack, lucide, markup, icons, image, картинка, свг, svg, графика',
-        route: DemoRoute.IconsLucide,
-    },
-    {
-        section: 'Icons',
-        title: 'Material',
-        keywords: 'icons, material, design, картинка, свг, svg, графика',
-        route: DemoRoute.IconsMaterial,
-    },
-    {
-        section: 'Icons',
-        title: 'FontAwesome',
-        keywords:
-            'icons, fontawesome, awesome, font, design, картинка, свг, svg, графика',
-        route: DemoRoute.IconsFontawesome,
-    },
     {
         section: 'Foundations',
         title: 'Styles',

projects/demo/src/modules/components/icon/index.html

@@ -4,7 +4,20 @@
     type="components"
 >
     <ng-template pageTab>
-        <p>A component to use icons and color them with CSS.</p>
+        <p>
+            A component to use icons and color them with CSS. By default,
+            <code>tui-icon</code>
+            expects the
+            <a
+                href="https://lucide.dev/icons/"
+                target="_blank"
+                tuiLink
+            >
+                Lucide icons.
+            </a>
+            To associate a name with icon you should use that pattern
+            <code>&#64;tui.[name]</code>
+        </p>
 
         <tui-doc-example
             *ngFor="let example of examples; let index = index"
@@ -80,4 +93,146 @@
     </ng-template>
 
     <tui-setup *pageTab />
+
+    <ng-template pageTab="Available icons">
+        <tui-doc-example
+            id="lucide"
+            heading="Lucide"
+            [component]="6 | tuiComponent"
+            [content]="6 | tuiExample"
+            [description]="lucideInfo"
+        >
+            <ng-template #lucideInfo>
+                Open source theme for Taiga UI
+                <a
+                    href="https://lucide.dev/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    Lucide Icons
+                </a>
+                by default. You can browse all the icons from this pack
+                <a
+                    href="https://lucide.dev/icons/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    here.
+                </a>
+
+                <tui-accordion
+                    class="tui-space_top-5"
+                    [rounded]="true"
+                >
+                    <tui-accordion-item>
+                        Setup
+                        <ng-template tuiAccordionItemContent>
+                            <tui-doc-code code="npm i @taiga-ui/icons" />
+
+                            <tui-doc-code
+                                filename="angular.json"
+                                [code]="lucide"
+                            />
+                        </ng-template>
+                    </tui-accordion-item>
+                </tui-accordion>
+            </ng-template>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="material"
+            heading="Material"
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample"
+            [description]="materialInfo"
+        >
+            <ng-template #materialInfo>
+                Taiga UI supports
+                <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>
+                You can replace icons used inside components as well through DI options, see example below.
+
+                <tui-accordion
+                    class="tui-space_top-5"
+                    [rounded]="true"
+                >
+                    <tui-accordion-item>
+                        Setup
+                        <ng-template tuiAccordionItemContent>
+                            <tui-doc-code code="npm i @taiga-ui/icons-material" />
+
+                            <tui-doc-code
+                                filename="angular.json"
+                                [code]="material"
+                            />
+                        </ng-template>
+                    </tui-accordion-item>
+                </tui-accordion>
+            </ng-template>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="font-awesome"
+            heading="FontAwesome"
+            [component]="8 | tuiComponent"
+            [content]="8 | tuiExample"
+            [description]="fontAwesomeInfo"
+        >
+            <ng-template #fontAwesomeInfo>
+                Taiga UI supports
+                <a
+                    href="https://fontawesome.com/"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    FontAwesome Icons (free pack).
+                </a>
+                You can browse all the icons from this pack
+                <a
+                    href="https://fontawesome.com/search?m=free&o=r"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    here
+                </a>
+                . You can replace icons used inside components as well through DI options, see example below.
+
+                <tui-accordion
+                    class="tui-space_top-5"
+                    [rounded]="true"
+                >
+                    <tui-accordion-item>
+                        Setup
+                        <ng-template tuiAccordionItemContent>
+                            <tui-doc-code code="npm i @taiga-ui/icons-font-awesome" />
+
+                            <tui-doc-code
+                                filename="angular.json"
+                                [code]="fontAwesome"
+                            />
+                        </ng-template>
+                    </tui-accordion-item>
+                </tui-accordion>
+            </ng-template>
+        </tui-doc-example>
+    </ng-template>
 </tui-doc-page>

projects/demo/src/modules/components/icon/index.ts

@@ -3,16 +3,21 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDemo} from '@demo/utils';
 import {TUI_USED_ICONS} from '@taiga-ui/cdk';
 import {TuiIcon} from '@taiga-ui/core';
+import {TuiAccordion} from '@taiga-ui/kit';
 import {tuiInputNumberOptionsProvider} from '@taiga-ui/legacy';
 
 @Component({
     standalone: true,
-    imports: [TuiDemo, TuiIcon],
+    imports: [TuiAccordion, TuiDemo, TuiIcon],
     templateUrl: './index.html',
     changeDetection,
     providers: [tuiInputNumberOptionsProvider({min: 0})],
 })
 export default class Page {
+    protected readonly lucide = import('./examples/import/lucide.md?raw');
+    protected readonly material = import('./examples/import/material.md?raw');
+    protected readonly fontAwesome = import('./examples/import/font-awesome.md?raw');
+
     protected readonly iconVariants = ['', ...TUI_USED_ICONS];
     protected readonly colorVariants = ['', 'var(--tui-text-primary)', 'red', '#3aa981'];