feat(icon): update samples content

live-editing/configs/IconConfigGenerator.ts

@@ -15,40 +15,41 @@ export class IconConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
 
-        // icon sample 1
+        // icon overview
         configs.push(new Config({
-            component: 'IconSample1Component',
+            component: 'IconOverviewComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // SVG icon sample
+        // icon size
         configs.push(new Config({
-            component: 'SvgIconSampleComponent',
+            component: 'IconSizeComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // Icon Styling Sample
+        // icon styling
         configs.push(new Config({
-            component: 'IconStylingSampleComponent',
-            additionalFiles: ["/src/app/data-display/icon/icon-styling-sample/layout.scss"],
+            component: 'IconStylingComponent',
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // Icon Service Sample
+        // icon tailwind styling
         configs.push(new Config({
-            component: 'IconServiceSampleComponent',
+            component: 'IconTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
-        // Material Symbols Sample
+        // Icon Service Sample
         configs.push(new Config({
-            component: 'MaterialSymbolsComponent',
+            component: 'IconServiceSampleComponent',
             appConfig: BaseAppConfig,
-            shortenComponentPathBy: "/data-display/material-symbols/"
+            shortenComponentPathBy: "/data-display/icon/"
         }));
 
         // Material icons extended sample

src/app/data-display/data-display-routes-data.ts

@@ -28,12 +28,11 @@ export const dataDisplayRoutesData = {
     // tslint:disable-next-line:max-line-length
     "circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" },
     "circular-styling-sample": { displayName: "Circular Styling Sample", parentName: "Circular Progressbar" },
-    "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
+    "icon-overview": { displayName: "Icon Overview", parentName: "Icon" },
+    "icon-size": { displayName: "Icon Size", parentName: "Icon" },
     "icon-service": { displayName: "Icon Service", parentName: "Icon" },
     "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
     "icon-tailwind-styling": { displayName: "Icon Tailwind Styling", parentName: "Icon" },
-    "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
-    "material-symbols": { displayName: "Material Symbols", parentName: "Icon" },
     "material-icons-extended": { displayName: "Material Icons Extended", parentName: "Icon" },
     "igx-for-sample-1": { displayName: "List with igxFor directive", parentName: "For" },
     "igx-for-sample-2": { displayName: "IgxFor Horizontal virtualization", parentName: "For" },

src/app/data-display/data-display.routes.ts

@@ -25,15 +25,11 @@ import { CircularDynamicSampleComponent } from './circular-progressbar/circular-
 import { CircularIndeterminateProgressbarComponent } from './circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component';
 import { CircularProgressbarComponent } from './circular-progressbar/circular-progressbar.component';
 import { CircularStylingSampleComponent } from './circular-progressbar/circular-styling-sample/circular-styling-sample.component';
-import { IconSample1Component } from './icon/icon-sample-1/icon-sample-1.component';
-import { IconSample2Component } from './icon/icon-sample-2/icon-sample-2.component';
-import { IconSample3Component } from './icon/icon-sample-3/icon-sample-3.component';
-import { IconSample4Component } from './icon/icon-sample-4/icon-sample-4.component';
-import { IconSample5Component } from './icon/icon-sample-5/icon-sample-5.component';
-import { IconStylingSampleComponent } from './icon/icon-styling-sample/icon-styling-sample.component';
-import { IconTailwindStylingSampleComponent } from './icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component';
+import { IconOverviewComponent } from './icon/icon-overview/icon-overview.component';
+import { IconSizeComponent } from './icon/icon-size/icon-size.component';
+import { IconStylingComponent } from './icon/icon-styling/icon-styling.component';
+import { IconTailwindStylingComponent } from './icon/icon-tailwind-styling/icon-tailwind-styling.component';
 import { IconServiceSampleComponent } from './icon/icon-service-sample/icon-service-sample.component';
-import { SvgIconSampleComponent } from './icon/svg-icon-sample/svg-icon-sample.component';
 import { IgxForComponent } from './igxFor/igxFor.component';
 import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component';
 import { VirtualScrollOverviewComponent } from './virtual-scroll/virtual-scroll-overview/virtual-scroll-overview.component';
@@ -60,7 +56,6 @@ import { TextHighlightSample2Component } from './text-highlight/text-highlight-s
 import { TextHighlightStyleComponent } from './text-highlight/text-highlight-style/text-highlight-style.component';
 import {
     MaterialIconsExtendedComponent} from './icon/material-icons-extended/material-icons-extended.component';
-import { MaterialSymbolsComponent } from './icon/material-symbols/material-symbols.component';
 import { QrCodeOverviewComponent } from './qr-code/qr-code-overview/qr-code-overview.component';
 import { QrCodeStylingComponent } from './qr-code/qr-code-styling/qr-code-styling.component';
 import { QrCodeTailwindStylingComponent } from './qr-code/qr-code-tailwind-styling/qr-code-tailwind-styling.component';
@@ -194,34 +189,14 @@ export const DataDisplayRoutes: Routes = [
         path: 'circular-progressbar'
     },
     {
-        component: IconSample1Component,
-        data: dataDisplayRoutesData['icon-sample-1'],
-        path: 'icon-sample-1'
+        component: IconOverviewComponent,
+        data: dataDisplayRoutesData['icon-overview'],
+        path: 'icon-overview'
     },
     {
-        component: IconSample2Component,
-        data: dataDisplayRoutesData['icon-sample-2'],
-        path: 'icon-sample-2'
-    },
-    {
-        component: IconSample3Component,
-        data: dataDisplayRoutesData['icon-sample-3'],
-        path: 'icon-sample-3'
-    },
-    {
-        component: IconSample4Component,
-        data: dataDisplayRoutesData['icon-sample-4'],
-        path: 'icon-sample-4'
-    },
-    {
-        component: IconSample5Component,
-        data: dataDisplayRoutesData['icon-sample-5'],
-        path: 'icon-sample-5'
-    },
-    {
-        component: SvgIconSampleComponent,
-        data: dataDisplayRoutesData['svg-icon-sample'],
-        path: 'svg-icon-sample'
+        component: IconSizeComponent,
+        data: dataDisplayRoutesData['icon-size'],
+        path: 'icon-size'
     },
     {
         component: IgxForComponent,
@@ -334,12 +309,12 @@ export const DataDisplayRoutes: Routes = [
         path: 'icon-service'
     },
     {
-        component: IconStylingSampleComponent,
+        component: IconStylingComponent,
         data: dataDisplayRoutesData['icon-styling'],
         path: 'icon-styling'
     },
     {
-        component: IconTailwindStylingSampleComponent,
+        component: IconTailwindStylingComponent,
         data: dataDisplayRoutesData['icon-tailwind-styling'],
         path: 'icon-tailwind-styling'
     },
@@ -353,11 +328,6 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['chip-tailwind-styling'],
         path: 'chip-tailwind-styling'
     },
-    {
-        component: MaterialSymbolsComponent,
-        data: dataDisplayRoutesData['material-symbols'],
-        path: 'material-symbols'
-    },
     {
         component: MaterialIconsExtendedComponent,
         data: dataDisplayRoutesData['material-icons-extended'],

src/app/data-display/icon/icon-overview/icon-overview.component.html

@@ -0,0 +1,10 @@
+<igx-nav-drawer class="menu" [isOpen]="true" [pin]="true" [pinThreshold]="0">
+    <ng-template igxDrawer>
+        @for (item of menuItems; track item.label) {
+            <span igxDrawerItem [active]="item.label === activeItem" (click)="activeItem = item.label">
+                <igx-icon [name]="item.icon"></igx-icon>
+                <span>{{ item.label }}</span>
+            </span>
+        }
+    </ng-template>
+</igx-nav-drawer>

src/app/data-display/icon/icon-overview/icon-overview.component.scss

@@ -0,0 +1,18 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.menu {
+    height: auto;
+}
+
+/* A pinned drawer fills the height of its container. Here it is only as tall
+   as its items. */
+.menu ::ng-deep .igx-nav-drawer__aside {
+    height: auto;
+    min-height: auto;
+}

src/app/data-display/icon/icon-overview/icon-overview.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent } from 'igniteui-angular/navigation-drawer';
+
+interface MenuItem {
+    label: string;
+    icon: string;
+}
+
+@Component({
+    selector: 'app-icon-overview',
+    styleUrls: ['./icon-overview.component.scss'],
+    templateUrl: './icon-overview.component.html',
+    imports: [IgxNavigationDrawerComponent, IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxIconComponent]
+})
+export class IconOverviewComponent {
+    public menuItems: MenuItem[] = [
+        { label: 'Home', icon: 'home' },
+        { label: 'Inbox', icon: 'mail' },
+        { label: 'Reports', icon: 'assignment' },
+        { label: 'Settings', icon: 'settings' },
+        { label: 'Support', icon: 'feedback' }
+    ];
+
+    public activeItem = 'Home';
+}

src/app/data-display/icon/icon-size/icon-size.component.html

@@ -0,0 +1,8 @@
+<div class="icon-sizes">
+    <igx-icon class="size-large" name="notifications"></igx-icon>
+    <span class="size-label">Large</span>
+    <igx-icon class="size-medium" name="notifications"></igx-icon>
+    <span class="size-label">Medium</span>
+    <igx-icon class="size-small" name="notifications"></igx-icon>
+    <span class="size-label">Small</span>
+</div>