From 89f7fe391ffd011c59fb3bfe4fec02ecbfdccf64 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 7 Oct 2026 12:25:37 +0300 Subject: [PATCH 1/3] feat(icon): update samples content --- live-editing/configs/IconConfigGenerator.ts | 21 ++- .../data-display/data-display-routes-data.ts | 5 +- src/app/data-display/data-display.routes.ts | 46 ++---- .../icon-overview.component.html | 10 ++ .../icon-overview.component.scss | 18 +++ .../icon-overview/icon-overview.component.ts | 26 ++++ .../icon/icon-size/icon-size.component.html | 8 ++ .../icon/icon-size/icon-size.component.scss | 39 +++++ .../icon/icon-size/icon-size.component.ts | 10 ++ .../icon-styling-sample.component.html | 44 ++++-- .../icon-styling-sample.component.scss | 133 ++++++++++++++++-- .../icon-styling-sample.component.ts | 23 ++- ...con-tailwind-styling-sample.component.html | 41 +++++- ...con-tailwind-styling-sample.component.scss | 22 +++ .../icon-tailwind-styling-sample.component.ts | 35 ++++- 15 files changed, 400 insertions(+), 81 deletions(-) create mode 100644 src/app/data-display/icon/icon-overview/icon-overview.component.html create mode 100644 src/app/data-display/icon/icon-overview/icon-overview.component.scss create mode 100644 src/app/data-display/icon/icon-overview/icon-overview.component.ts create mode 100644 src/app/data-display/icon/icon-size/icon-size.component.html create mode 100644 src/app/data-display/icon/icon-size/icon-size.component.scss create mode 100644 src/app/data-display/icon/icon-size/icon-size.component.ts diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts index 8666988c77..78fddf8e61 100644 --- a/live-editing/configs/IconConfigGenerator.ts +++ b/live-editing/configs/IconConfigGenerator.ts @@ -15,40 +15,39 @@ export class IconConfigGenerator implements IConfigGenerator { public generateConfigs(): Config[] { const configs = new Array(); - // 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"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); - // Icon Service Sample + // icon tailwind styling configs.push(new Config({ - component: 'IconServiceSampleComponent', + component: 'IconTailwindStylingSampleComponent', 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 diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts index 9d197973fd..eb5c19dde6 100644 --- a/src/app/data-display/data-display-routes-data.ts +++ b/src/app/data-display/data-display-routes-data.ts @@ -22,12 +22,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" }, diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 0c0584b651..05fb1a33ee 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -19,15 +19,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 { IconOverviewComponent } from './icon/icon-overview/icon-overview.component'; +import { IconSizeComponent } from './icon/icon-size/icon-size.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 { 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'; @@ -54,7 +50,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'; @@ -158,34 +153,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, @@ -317,11 +292,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'], diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.html b/src/app/data-display/icon/icon-overview/icon-overview.component.html new file mode 100644 index 0000000000..9377ace28c --- /dev/null +++ b/src/app/data-display/icon/icon-overview/icon-overview.component.html @@ -0,0 +1,10 @@ + + + @for (item of menuItems; track item.label) { + + + {{ item.label }} + + } + + diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.scss b/src/app/data-display/icon/icon-overview/icon-overview.component.scss new file mode 100644 index 0000000000..b48df7a53d --- /dev/null +++ b/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; +} diff --git a/src/app/data-display/icon/icon-overview/icon-overview.component.ts b/src/app/data-display/icon/icon-overview/icon-overview.component.ts new file mode 100644 index 0000000000..3ca83b4a87 --- /dev/null +++ b/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'; +} diff --git a/src/app/data-display/icon/icon-size/icon-size.component.html b/src/app/data-display/icon/icon-size/icon-size.component.html new file mode 100644 index 0000000000..8b39fae7a9 --- /dev/null +++ b/src/app/data-display/icon/icon-size/icon-size.component.html @@ -0,0 +1,8 @@ +
+ + Large + + Medium + + Small +
diff --git a/src/app/data-display/icon/icon-size/icon-size.component.scss b/src/app/data-display/icon/icon-size/icon-size.component.scss new file mode 100644 index 0000000000..ee81b47b6e --- /dev/null +++ b/src/app/data-display/icon/icon-size/icon-size.component.scss @@ -0,0 +1,39 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.icon-sizes { + display: grid; + grid-auto-flow: column; + grid-template-rows: auto auto; + place-items: center; + column-gap: 4.25rem; + row-gap: 1.0625rem; +} + +.icon-sizes igx-icon { + color: var(--ig-gray-800); +} + +.size-large { + --ig-size: var(--ig-size-large); +} + +.size-medium { + --ig-size: var(--ig-size-medium); +} + +.size-small { + --ig-size: var(--ig-size-small); +} + +.size-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", Arial, sans-serif; + font-size: 0.875rem; + line-height: 1.25rem; +} diff --git a/src/app/data-display/icon/icon-size/icon-size.component.ts b/src/app/data-display/icon/icon-size/icon-size.component.ts new file mode 100644 index 0000000000..7c9a086efb --- /dev/null +++ b/src/app/data-display/icon/icon-size/icon-size.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { IgxIconComponent } from 'igniteui-angular/icon'; + +@Component({ + selector: 'app-icon-size', + styleUrls: ['./icon-size.component.scss'], + templateUrl: './icon-size.component.html', + imports: [IgxIconComponent] +}) +export class IconSizeComponent { } diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html index 417a699ee7..729cceca6d 100644 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html +++ b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html @@ -1,17 +1,33 @@ -
-
- person +
+
+ + + +
-
- wifi -
-
- laptop_mac -
-
- pin_drop -
-
- cloud +
+ @for (action of actions; track action.label) { + + {{ action.label }} + }
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss index e3ab907c20..2362f60b78 100644 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss +++ b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss @@ -1,11 +1,128 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use "sass:meta"; +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); -$custom-icon-theme: icon-theme( - $color: #1481b8, - $disabled-color: #494949 -); +app-icon-styling-sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +.icon-styling { + --ig-font-family: "Aktiv Grotesk", Arial, sans-serif; + + display: flex; + flex-direction: column; + align-items: center; + gap: 2.8125rem; +} + +.button-row { + /* The buttons keep the medium size of the design, while styles.scss asks + the page for the large one. */ + --ig-size: var(--ig-size-medium); + + display: flex; + align-items: center; + gap: 1.5rem; +} + +.button-row .igx-button { + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.1px; + text-transform: none; +} + +.download-button { + border-color: #a9b8cc; + background: #e5ebf3; + color: #344b65; + box-shadow: none; +} + +.download-button igx-icon { + color: #344b65; +} + +.continue-button { + --ig-outlined-button-hover-background: rgb(0 93 204 / 8%); + --ig-outlined-button-focus-hover-background: rgb(0 93 204 / 8%); + --ig-outlined-button-active-background: rgb(0 93 204 / 16%); + --ig-outlined-button-focus-background: rgb(0 93 204 / 16%); + --ig-outlined-button-focus-visible-background: rgb(0 93 204 / 16%); + + border-color: #005dcc; + color: #005dcc; +} + +.continue-button igx-icon { + color: #005dcc; +} + +.delete-button { + --ig-outlined-button-hover-background: rgb(223 27 116 / 8%); + --ig-outlined-button-focus-hover-background: rgb(223 27 116 / 8%); + --ig-outlined-button-active-background: rgb(223 27 116 / 16%); + --ig-outlined-button-focus-background: rgb(223 27 116 / 16%); + --ig-outlined-button-focus-visible-background: rgb(223 27 116 / 16%); + + border-color: #df1b74; + color: #df1b74; +} + +.delete-button igx-icon { + color: #df1b74; +} + +.add-button { + --ig-size: var(--ig-size-small); + + width: 2.25rem; + min-width: 0; + height: 2.25rem; + min-height: 0; + padding: 0; + border: 1px solid #0176ff; + border-radius: 50%; + background: #cce4ff; + box-shadow: none; +} + +.add-button igx-icon { + color: #005dcc; +} + +.icon-toolbar { + display: flex; + gap: 1.5rem; + padding: 0.5rem; + border: 1px solid #e5ebf3; + border-radius: 999px; + background: #fff; +} + +.icon-toolbar .igx-icon-button { + --ig-flat-icon-button-hover-background: #f8f8f8; + --ig-flat-icon-button-focus-background: #e0e0e0; + --ig-flat-icon-button-focus-hover-background: #f8f8f8; + --ig-flat-icon-button-active-background: #e0e0e0; + + width: 1.5rem; + min-width: 0; + height: 1.5rem; + min-height: 0; + padding: 0; + border-radius: 50%; +} + +.icon-toolbar igx-icon { + color: #344b65; +} -:host { - @include tokens($custom-icon-theme); +/* The tooltips are moved to the overlay, outside of the toolbar. */ +.icon-tooltip { + --ig-tooltip-background: rgb(52 75 101 / 90%); + --ig-tooltip-text-color: #fff; } diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts index 09050f3abe..e319d36bb5 100644 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts +++ b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts @@ -1,10 +1,27 @@ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; +import { PositionSettings } from 'igniteui-angular/core'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxTooltipDirective, IgxTooltipTargetDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; +interface ToolbarAction { + icon: string; + label: string; +} + @Component({ selector: 'app-icon-styling-sample', + encapsulation: ViewEncapsulation.None, styleUrls: ['./icon-styling-sample.component.scss'], templateUrl: './icon-styling-sample.component.html', - imports: [IgxIconComponent] + imports: [IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxTooltipDirective, IgxTooltipTargetDirective] }) -export class IconStylingSampleComponent { } +export class IconStylingSampleComponent { + public actions: ToolbarAction[] = [ + { icon: 'edit', label: 'Edit' }, + { icon: 'content_copy', label: 'Copy' }, + { icon: 'share', label: 'Share' }, + { icon: 'delete', label: 'Delete' } + ]; + + public tooltipPosition: PositionSettings = { offset: 25 }; +} diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html index 9ee3ab6090..bcdb4c06d8 100644 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html +++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html @@ -1 +1,40 @@ -person +
+ + + + search + + + + + + + + + + + + + +
diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss index e69de29bb2..3a240dfe02 100644 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss +++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss @@ -0,0 +1,22 @@ +@use "sass:meta"; +@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); + +app-icon-tailwind-styling-sample { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 1rem; +} + +/* The icons sit inside the field, so the input drops the border that would set + them apart. The border is on the input's wrapper, which the template can't + reach with a class. */ +.search-field .igx-input-group__bundle-main, +.email-field .igx-input-group__bundle-main { + border-inline-start-width: 0; +} + +.email-field.igx-input-group--suffixed .igx-input-group__bundle-main { + border-inline-end-width: 0; +} diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts index abb7841ea1..a6fc759b35 100644 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts +++ b/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts @@ -1,10 +1,39 @@ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; +import { IgxIconButtonDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; + +const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @Component({ selector: 'app-icon-tailwind-styling-sample', + encapsulation: ViewEncapsulation.None, styleUrls: ['./icon-tailwind-styling-sample.component.scss'], templateUrl: './icon-tailwind-styling-sample.component.html', - imports: [IgxIconComponent] + imports: [ + IgxInputGroupComponent, + IgxInputDirective, + IgxLabelDirective, + IgxPrefixDirective, + IgxSuffixDirective, + IgxHintDirective, + IgxIconComponent, + IgxIconButtonDirective + ] }) -export class IconTailwindStylingSampleComponent { } +export class IconTailwindStylingSampleComponent { + public fieldClasses = 'w-[260px] [--ig-input-group-input-prefix-background:transparent] [--ig-input-group-input-prefix-background--filled:transparent] [--ig-input-group-input-prefix-background--focused:transparent] [--ig-input-group-input-suffix-background:transparent] [--ig-input-group-input-suffix-background--filled:transparent] [--ig-input-group-input-suffix-background--focused:transparent] [--ig-input-group-placeholder-color:#344b65] [--ig-input-group-hover-placeholder-color:#344b65] [--ig-input-group-focused-secondary-color:transparent]'; + public focusClasses = 'focus-within:[--ig-input-group-border-color:var(--ig-primary-500)] focus-within:[--ig-input-group-focused-border-color:var(--ig-primary-500)]'; + public invalidClasses = '[--ig-input-group-border-color:#ff134a] [--ig-input-group-focused-border-color:#ff134a]'; + + public passwordVisible = false; + public email = 'ana@'; + + public get emailInvalid(): boolean { + return !emailPattern.test(this.email); + } + + public onEmailInput(event: Event): void { + this.email = (event.target as HTMLInputElement).value; + } +} From f2094aaccb450f41ebea26eba63f69457be0a9e4 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Wed, 7 Oct 2026 12:54:25 +0300 Subject: [PATCH 2/3] fix(icon): remove not needed samples --- live-editing/configs/IconConfigGenerator.ts | 4 ++-- src/app/data-display/data-display.routes.ts | 8 +++---- .../icon-sample-1.component.html | 21 ---------------- .../icon-sample-1.component.scss | 14 ----------- .../icon-sample-1/icon-sample-1.component.ts | 10 -------- .../icon-sample-2.component.html | 8 ------- .../icon-sample-2.component.scss | 17 ------------- .../icon-sample-2/icon-sample-2.component.ts | 10 -------- .../icon-sample-3.component.html | 1 - .../icon-sample-3.component.scss | 3 --- .../icon-sample-3/icon-sample-3.component.ts | 10 -------- .../icon-sample-4.component.html | 1 - .../icon-sample-4.component.scss | 3 --- .../icon-sample-4/icon-sample-4.component.ts | 10 -------- .../icon-sample-5.component.html | 1 - .../icon-sample-5.component.scss | 3 --- .../icon-sample-5/icon-sample-5.component.ts | 10 -------- .../icon/icon-styling-sample/layout.scss | 18 -------------- .../icon-styling.component.html} | 0 .../icon-styling.component.scss} | 2 +- .../icon-styling.component.ts} | 8 +++---- .../icon-tailwind-styling.component.html} | 0 .../icon-tailwind-styling.component.scss} | 2 +- .../icon-tailwind-styling.component.ts} | 8 +++---- .../material-symbols.component.html | 18 -------------- .../material-symbols.component.scss | 22 ----------------- .../material-symbols.component.ts | 17 ------------- .../svg-icon-sample.component.html | 23 ------------------ .../svg-icon-sample.component.scss | 13 ---------- .../svg-icon-sample.component.ts | 24 ------------------- src/assets/images/svg/contains.svg | 21 ---------------- src/assets/images/svg/does_not_contain.svg | 21 ---------------- src/assets/images/svg/does_not_equal.svg | 21 ---------------- src/assets/images/svg/ends_with.svg | 21 ---------------- src/assets/images/svg/equals.svg | 21 ---------------- src/assets/images/svg/is_empty.svg | 21 ---------------- src/assets/images/svg/starts_with.svg | 21 ---------------- 37 files changed, 16 insertions(+), 420 deletions(-) delete mode 100644 src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html delete mode 100644 src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html delete mode 100644 src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html delete mode 100644 src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html delete mode 100644 src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts delete mode 100644 src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html delete mode 100644 src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss delete mode 100644 src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts delete mode 100644 src/app/data-display/icon/icon-styling-sample/layout.scss rename src/app/data-display/icon/{icon-styling-sample/icon-styling-sample.component.html => icon-styling/icon-styling.component.html} (100%) rename src/app/data-display/icon/{icon-styling-sample/icon-styling-sample.component.scss => icon-styling/icon-styling.component.scss} (99%) rename src/app/data-display/icon/{icon-styling-sample/icon-styling-sample.component.ts => icon-styling/icon-styling.component.ts} (81%) rename src/app/data-display/icon/{icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html => icon-tailwind-styling/icon-tailwind-styling.component.html} (100%) rename src/app/data-display/icon/{icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss => icon-tailwind-styling/icon-tailwind-styling.component.scss} (94%) rename src/app/data-display/icon/{icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts => icon-tailwind-styling/icon-tailwind-styling.component.ts} (88%) delete mode 100644 src/app/data-display/icon/material-symbols/material-symbols.component.html delete mode 100644 src/app/data-display/icon/material-symbols/material-symbols.component.scss delete mode 100644 src/app/data-display/icon/material-symbols/material-symbols.component.ts delete mode 100644 src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html delete mode 100644 src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss delete mode 100644 src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts delete mode 100644 src/assets/images/svg/contains.svg delete mode 100644 src/assets/images/svg/does_not_contain.svg delete mode 100644 src/assets/images/svg/does_not_equal.svg delete mode 100644 src/assets/images/svg/ends_with.svg delete mode 100644 src/assets/images/svg/equals.svg delete mode 100644 src/assets/images/svg/is_empty.svg delete mode 100644 src/assets/images/svg/starts_with.svg diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts index 78fddf8e61..89bd35ad0a 100644 --- a/live-editing/configs/IconConfigGenerator.ts +++ b/live-editing/configs/IconConfigGenerator.ts @@ -31,14 +31,14 @@ export class IconConfigGenerator implements IConfigGenerator { // icon styling configs.push(new Config({ - component: 'IconStylingSampleComponent', + component: 'IconStylingComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); // icon tailwind styling configs.push(new Config({ - component: 'IconTailwindStylingSampleComponent', + component: 'IconTailwindStylingComponent', appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" })); diff --git a/src/app/data-display/data-display.routes.ts b/src/app/data-display/data-display.routes.ts index 05fb1a33ee..72a7cc9267 100644 --- a/src/app/data-display/data-display.routes.ts +++ b/src/app/data-display/data-display.routes.ts @@ -21,8 +21,8 @@ import { CircularProgressbarComponent } from './circular-progressbar/circular-pr import { CircularStylingSampleComponent } from './circular-progressbar/circular-styling-sample/circular-styling-sample.component'; import { IconOverviewComponent } from './icon/icon-overview/icon-overview.component'; import { IconSizeComponent } from './icon/icon-size/icon-size.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 { 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 { IgxForComponent } from './igxFor/igxFor.component'; import { IgxForHorizontalComponent } from './igxFor/igxFor-horizontal-sample/igxFor-horizontal.component'; @@ -273,12 +273,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' }, diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html deleted file mode 100644 index 0eb739c306..0000000000 --- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
- sentiment_very_satisfied -
- -
- home -
- -
- airplanemode_active -
- -
- favorite -
- -
- search -
-
diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss deleted file mode 100644 index 6284f642c7..0000000000 --- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss +++ /dev/null @@ -1,14 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} diff --git a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts b/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts deleted file mode 100644 index 41cdf3d721..0000000000 --- a/src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-1', - styleUrls: ['./icon-sample-1.component.scss'], - templateUrl: './icon-sample-1.component.html', - imports: [IgxIconComponent] -}) -export class IconSample1Component { } diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html deleted file mode 100644 index 16f6cc1c38..0000000000 --- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
- phone_iphone -
-
- phone_iphone -
-
diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss deleted file mode 100644 index a39f68af46..0000000000 --- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss +++ /dev/null @@ -1,17 +0,0 @@ -.custom-size { - --size: 56px; -} - -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 8px; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - height: 44px; - align-items: center; - max-width: 80px; -} diff --git a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts b/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts deleted file mode 100644 index 82694a9f68..0000000000 --- a/src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-2', - styleUrls: ['./icon-sample-2.component.scss'], - templateUrl: './icon-sample-2.component.html', - imports: [IgxIconComponent] -}) -export class IconSample2Component { } diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html deleted file mode 100644 index 66a2096959..0000000000 --- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html +++ /dev/null @@ -1 +0,0 @@ -home diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss deleted file mode 100644 index bf5c4a2e12..0000000000 --- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.igx-icon { - margin: 8px; -} diff --git a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts b/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts deleted file mode 100644 index 4b663ead5b..0000000000 --- a/src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-3', - styleUrls: ['./icon-sample-3.component.scss'], - templateUrl: './icon-sample-3.component.html', - imports: [IgxIconComponent] -}) -export class IconSample3Component { } diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html deleted file mode 100644 index c3d5fa4110..0000000000 --- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html +++ /dev/null @@ -1 +0,0 @@ -volume_off diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss deleted file mode 100644 index bf5c4a2e12..0000000000 --- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.igx-icon { - margin: 8px; -} diff --git a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts b/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts deleted file mode 100644 index ea39a69e79..0000000000 --- a/src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-4', - styleUrls: ['./icon-sample-4.component.scss'], - templateUrl: './icon-sample-4.component.html', - imports: [IgxIconComponent] -}) -export class IconSample4Component { } diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html deleted file mode 100644 index 5140923d0f..0000000000 --- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html +++ /dev/null @@ -1 +0,0 @@ -bluetooth diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss deleted file mode 100644 index bf5c4a2e12..0000000000 --- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -.igx-icon { - margin: 8px; -} diff --git a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts b/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts deleted file mode 100644 index 182f6beb00..0000000000 --- a/src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { IgxIconComponent } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-icon-sample-5', - styleUrls: ['./icon-sample-5.component.scss'], - templateUrl: './icon-sample-5.component.html', - imports: [IgxIconComponent] -}) -export class IconSample5Component { } diff --git a/src/app/data-display/icon/icon-styling-sample/layout.scss b/src/app/data-display/icon/icon-styling-sample/layout.scss deleted file mode 100644 index 6951373f07..0000000000 --- a/src/app/data-display/icon/icon-styling-sample/layout.scss +++ /dev/null @@ -1,18 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} - -.igx-icon:hover { - color: #0a415c; -} \ No newline at end of file diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html b/src/app/data-display/icon/icon-styling/icon-styling.component.html similarity index 100% rename from src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html rename to src/app/data-display/icon/icon-styling/icon-styling.component.html diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss b/src/app/data-display/icon/icon-styling/icon-styling.component.scss similarity index 99% rename from src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss rename to src/app/data-display/icon/icon-styling/icon-styling.component.scss index 2362f60b78..c2bf9fba1b 100644 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss +++ b/src/app/data-display/icon/icon-styling/icon-styling.component.scss @@ -1,7 +1,7 @@ @use "sass:meta"; @include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); -app-icon-styling-sample { +app-icon-styling { display: flex; align-items: center; justify-content: center; diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts b/src/app/data-display/icon/icon-styling/icon-styling.component.ts similarity index 81% rename from src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts rename to src/app/data-display/icon/icon-styling/icon-styling.component.ts index e319d36bb5..312bdf652e 100644 --- a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts +++ b/src/app/data-display/icon/icon-styling/icon-styling.component.ts @@ -9,13 +9,13 @@ interface ToolbarAction { } @Component({ - selector: 'app-icon-styling-sample', + selector: 'app-icon-styling', encapsulation: ViewEncapsulation.None, - styleUrls: ['./icon-styling-sample.component.scss'], - templateUrl: './icon-styling-sample.component.html', + styleUrls: ['./icon-styling.component.scss'], + templateUrl: './icon-styling.component.html', imports: [IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxTooltipDirective, IgxTooltipTargetDirective] }) -export class IconStylingSampleComponent { +export class IconStylingComponent { public actions: ToolbarAction[] = [ { icon: 'edit', label: 'Edit' }, { icon: 'content_copy', label: 'Copy' }, diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html similarity index 100% rename from src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.html rename to src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.html diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss similarity index 94% rename from src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss rename to src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss index 3a240dfe02..a6e5c39eaf 100644 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.scss +++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.scss @@ -1,7 +1,7 @@ @use "sass:meta"; @include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light"); -app-icon-tailwind-styling-sample { +app-icon-tailwind-styling { display: flex; align-items: center; justify-content: center; diff --git a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts similarity index 88% rename from src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts rename to src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts index a6fc759b35..9d20bc1ccb 100644 --- a/src/app/data-display/icon/icon-tailwind-styling-sample/icon-tailwind-styling-sample.component.ts +++ b/src/app/data-display/icon/icon-tailwind-styling/icon-tailwind-styling.component.ts @@ -6,10 +6,10 @@ import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDi const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; @Component({ - selector: 'app-icon-tailwind-styling-sample', + selector: 'app-icon-tailwind-styling', encapsulation: ViewEncapsulation.None, - styleUrls: ['./icon-tailwind-styling-sample.component.scss'], - templateUrl: './icon-tailwind-styling-sample.component.html', + styleUrls: ['./icon-tailwind-styling.component.scss'], + templateUrl: './icon-tailwind-styling.component.html', imports: [ IgxInputGroupComponent, IgxInputDirective, @@ -21,7 +21,7 @@ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; IgxIconButtonDirective ] }) -export class IconTailwindStylingSampleComponent { +export class IconTailwindStylingComponent { public fieldClasses = 'w-[260px] [--ig-input-group-input-prefix-background:transparent] [--ig-input-group-input-prefix-background--filled:transparent] [--ig-input-group-input-prefix-background--focused:transparent] [--ig-input-group-input-suffix-background:transparent] [--ig-input-group-input-suffix-background--filled:transparent] [--ig-input-group-input-suffix-background--focused:transparent] [--ig-input-group-placeholder-color:#344b65] [--ig-input-group-hover-placeholder-color:#344b65] [--ig-input-group-focused-secondary-color:transparent]'; public focusClasses = 'focus-within:[--ig-input-group-border-color:var(--ig-primary-500)] focus-within:[--ig-input-group-focused-border-color:var(--ig-primary-500)]'; public invalidClasses = '[--ig-input-group-border-color:#ff134a] [--ig-input-group-focused-border-color:#ff134a]'; diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.html b/src/app/data-display/icon/material-symbols/material-symbols.component.html deleted file mode 100644 index 368fc8f0f9..0000000000 --- a/src/app/data-display/icon/material-symbols/material-symbols.component.html +++ /dev/null @@ -1,18 +0,0 @@ - -
-
- grade -
-
- favorite -
-
- -
-
- diamond -
-
- auto_awesome -
-
\ No newline at end of file diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.scss b/src/app/data-display/icon/material-symbols/material-symbols.component.scss deleted file mode 100644 index 13403b140c..0000000000 --- a/src/app/data-display/icon/material-symbols/material-symbols.component.scss +++ /dev/null @@ -1,22 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 20%; - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} - -.custom-icon { - font-variation-settings: - 'FILL' 0, - 'wght' 200, - 'GRAD' 0, - 'opsz' 40 -} \ No newline at end of file diff --git a/src/app/data-display/icon/material-symbols/material-symbols.component.ts b/src/app/data-display/icon/material-symbols/material-symbols.component.ts deleted file mode 100644 index 88a7a8d5a8..0000000000 --- a/src/app/data-display/icon/material-symbols/material-symbols.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component, OnInit, inject } from '@angular/core'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-material-symbols', - templateUrl: './material-symbols.component.html', - styleUrls: ['./material-symbols.component.scss'], - imports: [IgxIconComponent] -}) -export class MaterialSymbolsComponent implements OnInit { - private iconService = inject(IgxIconService); - - - public ngOnInit() { - this.iconService.registerFamilyAlias('material-symbols', 'material-symbols-outlined'); - } -} diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html deleted file mode 100644 index e9856835eb..0000000000 --- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.html +++ /dev/null @@ -1,23 +0,0 @@ -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss deleted file mode 100644 index 5048e080c7..0000000000 --- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -.wrapper { - display: flex; - flex-flow: row wrap; - margin: 16px 0; -} - -.icon-sample { - display: flex; - flex: 1 0 10%; - height: 44px; - justify-content: center; - align-items: center; -} diff --git a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts b/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts deleted file mode 100644 index 8df38cf200..0000000000 --- a/src/app/data-display/icon/svg-icon-sample/svg-icon-sample.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, OnInit, inject } from '@angular/core'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; - -@Component({ - selector: 'app-svg-icon-sample', - styleUrls: ['./svg-icon-sample.component.scss'], - templateUrl: './svg-icon-sample.component.html', - imports: [IgxIconComponent] -}) -export class SvgIconSampleComponent implements OnInit { - private iconService = inject(IgxIconService); - - - public ngOnInit() { - // register custom SVG icons - this.iconService.addSvgIcon('contains', 'assets/images/svg/contains.svg', 'filter-icons'); - this.iconService.addSvgIcon('does_not_contain', 'assets/images/svg/does_not_contain.svg', 'filter-icons'); - this.iconService.addSvgIcon('does_not_equal', 'assets/images/svg/does_not_equal.svg', 'filter-icons'); - this.iconService.addSvgIcon('ends_with', 'assets/images/svg/ends_with.svg', 'filter-icons'); - this.iconService.addSvgIcon('equals', 'assets/images/svg/equals.svg', 'filter-icons'); - this.iconService.addSvgIcon('is_empty', 'assets/images/svg/is_empty.svg', 'filter-icons'); - this.iconService.addSvgIcon('starts_with', 'assets/images/svg/starts_with.svg', 'filter-icons'); - } -} diff --git a/src/assets/images/svg/contains.svg b/src/assets/images/svg/contains.svg deleted file mode 100644 index a69a25741c..0000000000 --- a/src/assets/images/svg/contains.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/contains - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/does_not_contain.svg b/src/assets/images/svg/does_not_contain.svg deleted file mode 100644 index 75e0c0a9a2..0000000000 --- a/src/assets/images/svg/does_not_contain.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/does not contain - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/does_not_equal.svg b/src/assets/images/svg/does_not_equal.svg deleted file mode 100644 index 585f8475ac..0000000000 --- a/src/assets/images/svg/does_not_equal.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/does not equal - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/ends_with.svg b/src/assets/images/svg/ends_with.svg deleted file mode 100644 index 6e0ce79bf2..0000000000 --- a/src/assets/images/svg/ends_with.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/ends with - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/equals.svg b/src/assets/images/svg/equals.svg deleted file mode 100644 index 47cf89046e..0000000000 --- a/src/assets/images/svg/equals.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/equals - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/is_empty.svg b/src/assets/images/svg/is_empty.svg deleted file mode 100644 index dd271bcbbd..0000000000 --- a/src/assets/images/svg/is_empty.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/is empty - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/images/svg/starts_with.svg b/src/assets/images/svg/starts_with.svg deleted file mode 100644 index c5e44e0b69..0000000000 --- a/src/assets/images/svg/starts_with.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Icons/filter/starts with - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file From 0b209ed6ea72f42bca923f328e51d0552aa7d12b Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 22 Oct 2026 12:07:04 +0300 Subject: [PATCH 3/3] fix(live-editing): add tailwind to icon tailwind styling sample The sample was generated without tailwindcss, @tailwindcss/postcss and .postcssrc.json, so its utility classes had no styles in StackBlitz and CodeSandbox. Co-Authored-By: Claude Opus 5.5 --- live-editing/configs/IconConfigGenerator.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts index 89bd35ad0a..73cd20dec9 100644 --- a/live-editing/configs/IconConfigGenerator.ts +++ b/live-editing/configs/IconConfigGenerator.ts @@ -39,6 +39,8 @@ export class IconConfigGenerator implements IConfigGenerator { // icon tailwind styling configs.push(new Config({ component: 'IconTailwindStylingComponent', + additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"], + additionalFiles: [".postcssrc.json"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-display/icon/" }));