{{ toast.title }}
{{ toast.message }}
diff --git a/src/framework/theme/components/toastr/toast.component.scss b/src/framework/theme/components/toastr/toast.component.scss
index 51946e71db..d6cd2721ed 100644
--- a/src/framework/theme/components/toastr/toast.component.scss
+++ b/src/framework/theme/components/toastr/toast.component.scss
@@ -39,7 +39,7 @@
}
}
- .icon {
+ nb-icon {
font-size: 2.5rem;
}
diff --git a/src/framework/theme/components/toastr/toast.component.ts b/src/framework/theme/components/toastr/toast.component.ts
index 86026d1d71..1677ecb0e9 100644
--- a/src/framework/theme/components/toastr/toast.component.ts
+++ b/src/framework/theme/components/toastr/toast.component.ts
@@ -85,6 +85,10 @@ export class NbToastComponent {
return this.toast.config.icon;
}
+ get iconPack(): string {
+ return this.toast.config.iconPack;
+ }
+
@HostListener('click')
onClick() {
this.destroy.emit();
diff --git a/src/framework/theme/components/toastr/toastr-config.ts b/src/framework/theme/components/toastr/toastr-config.ts
index 98d7b77ddf..e8e0ac31e0 100644
--- a/src/framework/theme/components/toastr/toastr-config.ts
+++ b/src/framework/theme/components/toastr/toastr-config.ts
@@ -41,18 +41,22 @@ export class NbToastrConfig {
* */
hasIcon: boolean = true;
/**
- * Icon class that can be provided to render custom icon.
+ * Icon name that can be provided to render custom icon.
* */
- icon: string = 'nb-email';
+ icon: string = 'email';
+ /**
+ * Icon pack to look for the icon in.
+ * */
+ iconPack: string;
/**
* Toast status icon-class mapping.
* */
protected icons = {
- [NbToastStatus.DANGER]: 'nb-danger',
- [NbToastStatus.SUCCESS]: 'nb-checkmark-circle',
- [NbToastStatus.INFO]: 'nb-help',
- [NbToastStatus.WARNING]: 'nb-alert',
- [NbToastStatus.PRIMARY]: 'nb-email',
+ [NbToastStatus.DANGER]: 'flash-outline',
+ [NbToastStatus.SUCCESS]: 'checkmark-outline',
+ [NbToastStatus.INFO]: 'question-mark-outline',
+ [NbToastStatus.WARNING]: 'alert-triangle-outline',
+ [NbToastStatus.PRIMARY]: 'email-outline',
};
constructor(config: Partial
) {
@@ -63,6 +67,7 @@ export class NbToastrConfig {
protected patchIcon(config: Partial) {
if (!('icon' in config)) {
config.icon = this.icons[config.status || NbToastStatus.PRIMARY];
+ config.iconPack = 'nebular-essentials';
}
}
}
diff --git a/src/framework/theme/components/toastr/toastr.module.ts b/src/framework/theme/components/toastr/toastr.module.ts
index 58a24f5d56..37994e2c82 100644
--- a/src/framework/theme/components/toastr/toastr.module.ts
+++ b/src/framework/theme/components/toastr/toastr.module.ts
@@ -8,6 +8,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
import { NbOverlayModule } from '../cdk';
import { NbSharedModule } from '../shared/shared.module';
+import { NbIconModule } from '../icon/icon.module';
import { NbToastrContainerRegistry, NbToastrService } from './toastr.service';
import { NbToastComponent } from './toast.component';
@@ -16,7 +17,7 @@ import { NB_TOASTR_CONFIG, NbToastrConfig } from './toastr-config';
@NgModule({
- imports: [NbSharedModule, NbOverlayModule],
+ imports: [NbSharedModule, NbOverlayModule, NbIconModule],
declarations: [NbToastrContainerComponent, NbToastComponent],
entryComponents: [NbToastrContainerComponent, NbToastComponent],
})
diff --git a/src/framework/theme/components/tooltip/tooltip.component.scss b/src/framework/theme/components/tooltip/tooltip.component.scss
index a5e0129bd8..407319f3e0 100644
--- a/src/framework/theme/components/tooltip/tooltip.component.scss
+++ b/src/framework/theme/components/tooltip/tooltip.component.scss
@@ -26,7 +26,7 @@
height: 0;
}
- .icon {
+ nb-icon {
font-size: 1.25rem;
}
@@ -34,10 +34,10 @@
line-height: 1.25rem;
}
- .icon + span {
+ nb-icon + span {
margin-left: 0.5rem;
}
- &.right .icon + span {
+ &.right nb-icon + span {
margin-right: 0.5rem;
}
diff --git a/src/framework/theme/components/tooltip/tooltip.component.ts b/src/framework/theme/components/tooltip/tooltip.component.ts
index 25deaec704..0594c564ec 100644
--- a/src/framework/theme/components/tooltip/tooltip.component.ts
+++ b/src/framework/theme/components/tooltip/tooltip.component.ts
@@ -33,7 +33,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
template: `
-
+
{{ content }}
`,
diff --git a/src/framework/theme/components/tooltip/tooltip.module.ts b/src/framework/theme/components/tooltip/tooltip.module.ts
index dba81f2bf1..817cf0148c 100644
--- a/src/framework/theme/components/tooltip/tooltip.module.ts
+++ b/src/framework/theme/components/tooltip/tooltip.module.ts
@@ -6,14 +6,16 @@
import { NgModule } from '@angular/core';
-import { NbTooltipComponent } from './tooltip.component';
import { NbSharedModule } from '../shared/shared.module';
-import { NbTooltipDirective } from './tooltip.directive';
import { NbOverlayModule } from '../cdk';
+import { NbIconModule } from '../icon/icon.module';
+
+import { NbTooltipComponent } from './tooltip.component';
+import { NbTooltipDirective } from './tooltip.directive';
@NgModule({
- imports: [NbSharedModule, NbOverlayModule],
+ imports: [NbSharedModule, NbOverlayModule, NbIconModule],
declarations: [NbTooltipComponent, NbTooltipDirective],
exports: [NbTooltipDirective],
entryComponents: [NbTooltipComponent],
diff --git a/src/framework/theme/components/tooltip/tooltip.spec.ts b/src/framework/theme/components/tooltip/tooltip.spec.ts
index 56d1b7e81a..9b9da6bd6f 100644
--- a/src/framework/theme/components/tooltip/tooltip.spec.ts
+++ b/src/framework/theme/components/tooltip/tooltip.spec.ts
@@ -16,6 +16,7 @@ import {
import { NbTooltipDirective } from './tooltip.directive';
import { NbTooltipModule } from './tooltip.module';
import { NbTooltipComponent } from './tooltip.component';
+import { NbIconLibraries } from '../icon/icon-libraries';
@Component({
selector: 'nb-tooltip-default-test',
@@ -181,6 +182,10 @@ describe('Directive: NbTooltipDirective', () => {
PopoverTestModule,
],
});
+
+ const iconLibs: NbIconLibraries = TestBed.get(NbIconLibraries);
+ iconLibs.registerSvgPack('test', { 'some-icon': '' });
+ iconLibs.setDefaultPack('test')
}));
describe('smoke ', () => {
@@ -241,8 +246,8 @@ describe('Directive: NbTooltipDirective', () => {
fixture.componentInstance.tooltip.show();
fixture.detectChanges();
- const iconContainer = fixture.nativeElement.querySelector('nb-tooltip .content i');
- expect(iconContainer.className).toContain('icon some-icon');
+ const iconContainer = fixture.nativeElement.querySelector('nb-tooltip .content nb-icon');
+ expect(iconContainer.textContent).toContain('some-icon');
});
it('should display status', () => {
@@ -381,7 +386,7 @@ describe('Directive: NbTooltipDirective', () => {
fixture.componentInstance.trigger = NbTrigger.CLICK;
fixture.componentInstance.content = 'new string';
fixture.componentInstance.status = 'success';
- fixture.componentInstance.icon = 'nb-home';
+ fixture.componentInstance.icon = 'home';
fixture.componentInstance.position = NbPosition.LEFT;
fixture.detectChanges();
@@ -401,7 +406,7 @@ describe('Directive: NbTooltipDirective', () => {
expect(contentSpy).toHaveBeenCalledTimes(3);
expect(contentSpy).toHaveBeenCalledWith('new string');
expect(contextSpy).toHaveBeenCalledTimes(3);
- expect(contextSpy).toHaveBeenCalledWith({ status: 'success', icon: 'nb-home' });
+ expect(contextSpy).toHaveBeenCalledWith({ status: 'success', icon: 'home' });
expect(buildSpy).toHaveBeenCalledTimes(1);
expect(rebuildSpy).toHaveBeenCalledTimes(2);
});
@@ -447,7 +452,7 @@ describe('Directive: NbTooltipDirective', () => {
fixture.componentInstance.tooltip.trigger = NbTrigger.CLICK;
fixture.componentInstance.tooltip.content = 'new string';
fixture.componentInstance.tooltip.status = 'success';
- fixture.componentInstance.tooltip.icon = 'nb-home';
+ fixture.componentInstance.tooltip.icon = 'home';
fixture.componentInstance.tooltip.position = NbPosition.LEFT;
fixture.componentInstance.tooltip.rebuild();
@@ -467,7 +472,7 @@ describe('Directive: NbTooltipDirective', () => {
expect(contentSpy).toHaveBeenCalledTimes(3);
expect(contentSpy).toHaveBeenCalledWith('new string');
expect(contextSpy).toHaveBeenCalledTimes(3);
- expect(contextSpy).toHaveBeenCalledWith({ status: 'success', icon: 'nb-home' });
+ expect(contextSpy).toHaveBeenCalledWith({ status: 'success', icon: 'home' });
expect(buildSpy).toHaveBeenCalledTimes(1);
expect(rebuildSpy).toHaveBeenCalledTimes(2);
});
diff --git a/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss b/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
index 47d4cfd8c5..0471cb8797 100644
--- a/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
+++ b/src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
@@ -19,6 +19,10 @@
border: $border-width $border-style $border-color;
}
+ .nb-tree-grid-header-cell {
+ line-height: 1.5;
+ }
+
.nb-tree-grid-header-row {
background: nb-theme(tree-grid-header-bg);
}
@@ -37,9 +41,18 @@
}
}
- nb-tree-grid-row-toggle .row-toggle-button .icon,
- nb-sort-icon .icon {
- color: nb-theme(tree-grid-icon-color);
+ .nb-tree-grid-header-cell {
+ button {
+ vertical-align: middle;
+ }
+ }
+
+ nb-tree-grid-row-toggle, nb-sort-icon {
+ nb-icon {
+ font-size: inherit;
+ vertical-align: middle;
+ color: nb-theme(tree-grid-icon-color);
+ }
}
@include nb-tree-grid-sort-header-theme();
diff --git a/src/framework/theme/components/tree-grid/tree-grid-row-toggle.component.ts b/src/framework/theme/components/tree-grid/tree-grid-row-toggle.component.ts
index 5776c1e455..c524d0c021 100644
--- a/src/framework/theme/components/tree-grid/tree-grid-row-toggle.component.ts
+++ b/src/framework/theme/components/tree-grid/tree-grid-row-toggle.component.ts
@@ -14,7 +14,10 @@ import { NbTreeGridCellDirective } from './tree-grid-cell.component';
selector: 'nb-tree-grid-row-toggle',
template: `
`,
styles: [`
diff --git a/src/framework/theme/components/tree-grid/tree-grid-sort.component.ts b/src/framework/theme/components/tree-grid/tree-grid-sort.component.ts
index 7adcfa0045..b07d6cb4a7 100644
--- a/src/framework/theme/components/tree-grid/tree-grid-sort.component.ts
+++ b/src/framework/theme/components/tree-grid/tree-grid-sort.component.ts
@@ -82,11 +82,8 @@ export class NbSortHeaderIconDirective {}
selector: 'nb-sort-icon',
template: `
-
-
+
+
`,
})
diff --git a/src/framework/theme/components/tree-grid/tree-grid.module.ts b/src/framework/theme/components/tree-grid/tree-grid.module.ts
index bce3456b62..787647063f 100644
--- a/src/framework/theme/components/tree-grid/tree-grid.module.ts
+++ b/src/framework/theme/components/tree-grid/tree-grid.module.ts
@@ -8,6 +8,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NbTableModule } from '../cdk/table';
+import { NbIconModule } from '../icon/icon.module';
import { NbTreeGridComponent } from './tree-grid.component';
import {
NbTreeGridCellDefDirective,
@@ -79,7 +80,7 @@ const COMPONENTS = [
];
@NgModule({
- imports: [ CommonModule, NbTableModule ],
+ imports: [ CommonModule, NbTableModule, NbIconModule ],
declarations: [ ...COMPONENTS ],
exports: [ NbTableModule, ...COMPONENTS ],
providers: [
diff --git a/src/framework/theme/components/window/window.component.ts b/src/framework/theme/components/window/window.component.ts
index 0944390bcd..2b80db8c29 100644
--- a/src/framework/theme/components/window/window.component.ts
+++ b/src/framework/theme/components/window/window.component.ts
@@ -33,16 +33,16 @@ import { NbWindowRef } from './window-ref';
diff --git a/src/framework/theme/components/window/window.module.ts b/src/framework/theme/components/window/window.module.ts
index 505cb45c33..117e4a27a7 100644
--- a/src/framework/theme/components/window/window.module.ts
+++ b/src/framework/theme/components/window/window.module.ts
@@ -2,13 +2,14 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NbOverlayModule } from '../cdk/overlay';
import { NbCardModule } from '../card/card.module';
+import { NbIconModule } from '../icon/icon.module';
import { NbWindowService } from './window.service';
import { NbWindowsContainerComponent } from './windows-container.component';
import { NbWindowComponent } from './window.component';
import { NB_WINDOW_CONFIG, NbWindowConfig } from './window.options';
@NgModule({
- imports: [CommonModule, NbOverlayModule, NbCardModule],
+ imports: [CommonModule, NbOverlayModule, NbCardModule, NbIconModule],
declarations: [
NbWindowsContainerComponent,
NbWindowComponent,
diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts
index 7f54b80c6b..b3bc9364dc 100644
--- a/src/framework/theme/index.ts
+++ b/src/framework/theme/index.ts
@@ -99,3 +99,8 @@ export * from './components/tree-grid/data-source/tree-grid-data.service';
export * from './components/tree-grid/data-source/tree-grid-filter.service';
export * from './components/tree-grid/data-source/tree-grid.service';
export * from './components/tree-grid/data-source/tree-grid-sort.service';
+export * from './components/icon/icon.module';
+export * from './components/icon/icon.component';
+export * from './components/icon/icon';
+export * from './components/icon/icon-pack';
+export * from './components/icon/icon-libraries';
diff --git a/src/framework/theme/package.json b/src/framework/theme/package.json
index 885dac07ff..0caf76b55b 100644
--- a/src/framework/theme/package.json
+++ b/src/framework/theme/package.json
@@ -29,11 +29,10 @@
"@angular/core": "^7.0.0",
"@angular/router": "^7.0.0",
"@angular/cdk": "^7.2.1",
- "rxjs": "^6.3.0",
- "nebular-icons": "^1.1.0"
+ "rxjs": "^6.3.0"
},
"dependencies": {
"intersection-observer": "0.5.0"
},
"schematics": "./schematics/collection.json"
-}
\ No newline at end of file
+}
diff --git a/src/framework/theme/schematics/ng-add/index.spec.ts b/src/framework/theme/schematics/ng-add/index.spec.ts
index 4e86ac20d5..af529e08e7 100644
--- a/src/framework/theme/schematics/ng-add/index.spec.ts
+++ b/src/framework/theme/schematics/ng-add/index.spec.ts
@@ -87,13 +87,13 @@ describe('ng-add', () => {
expect(dependencies['@nebular/theme']).toBe(nebularThemeVersion);
});
- it('should add nebular-icons in package.json', function () {
+ it('should add @nebular/eva-icons in package.json', function () {
const tree = runNgAddSchematic();
const dependencies = getPackageDependencies(tree);
- const nebularIconsVersion = require('../../package.json').peerDependencies['nebular-icons'];
+ const nebularEvaIconsVersion = require('../../package.json').version;
- expect(dependencies['nebular-icons']).toBeDefined();
- expect(dependencies['nebular-icons']).toBe(nebularIconsVersion);
+ expect(dependencies['@nebular/eva-icons']).toBeDefined();
+ expect(dependencies['@nebular/eva-icons']).toBe(nebularEvaIconsVersion);
});
it('should register NbThemeModule.forRoot()', () => {
diff --git a/src/framework/theme/schematics/ng-add/index.ts b/src/framework/theme/schematics/ng-add/index.ts
index fac7f319ae..0846eb7ec0 100644
--- a/src/framework/theme/schematics/ng-add/index.ts
+++ b/src/framework/theme/schematics/ng-add/index.ts
@@ -17,7 +17,6 @@ import {
addDependencyToPackageJson,
addDevDependencyToPackageJson,
getDependencyVersionFromPackageJson,
- getNebularPeerDependencyVersionFromPackageJson,
getNebularVersion,
} from '../util/package';
@@ -38,12 +37,11 @@ export default function (options: Schema): Rule {
function registerPeerDependencies(host: Tree) {
const angularCoreVersion = getDependencyVersionFromPackageJson(host, '@angular/core');
const nebularThemeVersion = getNebularVersion();
- const nebularIconsVersion = getNebularPeerDependencyVersionFromPackageJson('nebular-icons');
addDependencyToPackageJson(host, '@angular/cdk', angularCoreVersion);
addDependencyToPackageJson(host, '@angular/animations', angularCoreVersion);
addDependencyToPackageJson(host, '@nebular/theme', nebularThemeVersion);
- addDependencyToPackageJson(host, 'nebular-icons', nebularIconsVersion);
+ addDependencyToPackageJson(host, '@nebular/eva-icons', nebularThemeVersion);
addDevDependencyToPackageJson(host, '@schematics/angular', angularCoreVersion);
}
diff --git a/src/framework/theme/schematics/ng-add/register-modules/index.ts b/src/framework/theme/schematics/ng-add/register-modules/index.ts
index e64e2487f5..886398c246 100644
--- a/src/framework/theme/schematics/ng-add/register-modules/index.ts
+++ b/src/framework/theme/schematics/ng-add/register-modules/index.ts
@@ -58,6 +58,7 @@ function registerNebularModules(options: Schema): Rule {
addModuleImportToRootModule(tree, nebularThemeModule, '@nebular/theme', project);
addModuleImportToRootModule(tree, 'NbLayoutModule', '@nebular/theme', project);
+ addModuleImportToRootModule(tree, 'NbEvaIconsModule', '@nebular/eva-icons', project);
}
}
diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss
index 77fdd6cdf1..66972c1269 100644
--- a/src/framework/theme/styles/global/_components.scss
+++ b/src/framework/theme/styles/global/_components.scss
@@ -38,6 +38,7 @@
@import '../../components/datepicker/datepicker-container.component.theme';
@import '../../components/radio/radio.component.theme';
@import '../../components/tree-grid/tree-grid.component.theme';
+@import '../../components/icon/icon.component.theme';
@mixin nb-theme-components() {
@@ -75,4 +76,5 @@
@include nb-datepicker-theme();
@include nb-radio-theme();
@include nb-tree-grid-theme();
+ @include nb-icon-theme();
}
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 0b83928abd..1b5245d7e8 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -216,7 +216,7 @@ $theme: (
menu-group-padding: 1rem 1.25rem,
menu-item-padding: 0.675rem 0.75rem,
menu-item-separator: separator,
- menu-icon-font-size: 2.5rem,
+ menu-icon-font-size: 1.5rem,
menu-icon-margin: 0 0.25rem 0,
menu-icon-color: color-fg,
menu-icon-active-color: color-fg-heading,
@@ -640,7 +640,7 @@ $theme: (
stepper-accent-color: color-primary,
stepper-completed-fg: color-white,
stepper-fg: color-fg,
- stepper-completed-icon-size: 1.5rem,
+ stepper-completed-icon-size: 1.25rem,
stepper-completed-icon-weight: font-weight-ultra-bold,
stepper-step-padding: padding,
@@ -769,6 +769,15 @@ $theme: (
tree-grid-row-hover-bg: color-bg,
tree-grid-sort-header-button-color: color-fg-text,
tree-grid-icon-color: color-fg-text,
+
+ icon-font-size: 1.25rem,
+ icon-width: icon-font-size,
+ icon-height: icon-font-size,
+ icon-primary-fg: color-primary,
+ icon-info-fg: color-info,
+ icon-success-fg: color-success,
+ icon-warning-fg: color-warning,
+ icon-danger-fg: color-danger,
);
// register the theme
diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts
index 7ace3e26ec..9cfcddb1ff 100644
--- a/src/playground/playground.module.ts
+++ b/src/playground/playground.module.ts
@@ -5,6 +5,7 @@
*/
import { NgModule } from '@angular/core';
+
import { PlaygroundRoutingModule } from './playground-routing.module';
@NgModule({
diff --git a/src/playground/with-layout/action/action-badge.component.html b/src/playground/with-layout/action/action-badge.component.html
index 8127b23147..c18b10996a 100644
--- a/src/playground/with-layout/action/action-badge.component.html
+++ b/src/playground/with-layout/action/action-badge.component.html
@@ -2,16 +2,16 @@
-
-
-
diff --git a/src/playground/with-layout/action/action-showcase.component.html b/src/playground/with-layout/action/action-showcase.component.html
index 942d486418..71a2a46694 100644
--- a/src/playground/with-layout/action/action-showcase.component.html
+++ b/src/playground/with-layout/action/action-showcase.component.html
@@ -2,11 +2,11 @@
-
-
-
-
-
+
+
+
+
+
Custom Action
diff --git a/src/playground/with-layout/action/action-sizes.component.html b/src/playground/with-layout/action/action-sizes.component.html
index 75a4baeaa7..f010bd24f6 100644
--- a/src/playground/with-layout/action/action-sizes.component.html
+++ b/src/playground/with-layout/action/action-sizes.component.html
@@ -2,10 +2,10 @@
-
-
-
-
+
+
+
+
@@ -15,10 +15,10 @@
-
-
-
-
+
+
+
+
@@ -28,10 +28,10 @@
-
-
-
-
+
+
+
+
diff --git a/src/playground/with-layout/action/action-test.component.ts b/src/playground/with-layout/action/action-test.component.ts
index d0e4baff68..1812d60011 100644
--- a/src/playground/with-layout/action/action-test.component.ts
+++ b/src/playground/with-layout/action/action-test.component.ts
@@ -13,14 +13,14 @@ import { NbBadgeComponent } from '@nebular/theme';
-
-
+
+
-
-
-
+
+
+
Hello
@@ -31,14 +31,14 @@ import { NbBadgeComponent } from '@nebular/theme';
-
-
+
+
-
-
-
+
+
+
Hello
@@ -49,14 +49,14 @@ import { NbBadgeComponent } from '@nebular/theme';
-
-
+
+
-
-
-
+
+
+
Hello
@@ -67,14 +67,14 @@ import { NbBadgeComponent } from '@nebular/theme';
-
-
+
+
-
-
-
+
+
+
Hello
@@ -95,31 +95,31 @@ import { NbBadgeComponent } from '@nebular/theme';
badgeText="29"
[badgeStatus]="badge.STATUS_DANGER"
[badgePosition]="badge.TOP_LEFT"
- icon="ion-ios-flower-outline">
+ icon="search-outline">
+ icon="search-outline">
+ icon="search-outline">
+ icon="search-outline">
Badge
diff --git a/src/playground/with-layout/action/action-width.component.html b/src/playground/with-layout/action/action-width.component.html
index 70089f5ab4..efefa43925 100644
--- a/src/playground/with-layout/action/action-width.component.html
+++ b/src/playground/with-layout/action/action-width.component.html
@@ -2,8 +2,8 @@
-
-
+
+
diff --git a/src/playground/with-layout/button/button-icon.component.html b/src/playground/with-layout/button/button-icon.component.html
new file mode 100644
index 0000000000..75e1904690
--- /dev/null
+++ b/src/playground/with-layout/button/button-icon.component.html
@@ -0,0 +1,8 @@
+
+ Button with Icon
+
+
+
+
+
+
diff --git a/src/playground/with-layout/button/button-icon.component.ts b/src/playground/with-layout/button/button-icon.component.ts
new file mode 100644
index 0000000000..e4c133cc5d
--- /dev/null
+++ b/src/playground/with-layout/button/button-icon.component.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'nb-button-icon',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: './button-icon.component.html',
+ styles: [`
+ [nbButton] {
+ margin-right: 0.75rem;
+ margin-bottom: 1rem;
+ }
+ `],
+})
+export class ButtonIconComponent {
+}
diff --git a/src/playground/with-layout/button/button-routing.module.ts b/src/playground/with-layout/button/button-routing.module.ts
index 5c566e70df..055109f680 100644
--- a/src/playground/with-layout/button/button-routing.module.ts
+++ b/src/playground/with-layout/button/button-routing.module.ts
@@ -14,6 +14,7 @@ import { ButtonShapesComponent } from './button-shapes.component';
import { ButtonShowcaseComponent } from './button-showcase.component';
import { ButtonSizesComponent } from './button-sizes.component';
import { ButtonTypesComponent } from './button-types.component';
+import { ButtonIconComponent } from './button-icon.component';
const routes: Route[] = [
{
@@ -48,6 +49,10 @@ const routes: Route[] = [
path: 'button-types.component',
component: ButtonTypesComponent,
},
+ {
+ path: 'button-icon.component',
+ component: ButtonIconComponent,
+ },
];
@NgModule({
diff --git a/src/playground/with-layout/button/button.module.ts b/src/playground/with-layout/button/button.module.ts
index 99dc52677f..ecdf850577 100644
--- a/src/playground/with-layout/button/button.module.ts
+++ b/src/playground/with-layout/button/button.module.ts
@@ -5,7 +5,7 @@
*/
import { NgModule } from '@angular/core';
-import { NbButtonModule, NbCardModule } from '@nebular/theme';
+import { NbButtonModule, NbCardModule, NbIconModule } from '@nebular/theme';
import { ButtonRoutingModule } from './button-routing.module';
import { ButtonColorsComponent } from './button-colors.component';
import { ButtonFullWidthComponent } from './button-full-width.component';
@@ -15,6 +15,7 @@ import { ButtonShapesComponent } from './button-shapes.component';
import { ButtonShowcaseComponent } from './button-showcase.component';
import { ButtonSizesComponent } from './button-sizes.component';
import { ButtonTypesComponent } from './button-types.component';
+import { ButtonIconComponent } from './button-icon.component';
@NgModule({
declarations: [
@@ -26,7 +27,8 @@ import { ButtonTypesComponent } from './button-types.component';
ButtonShowcaseComponent,
ButtonSizesComponent,
ButtonTypesComponent,
+ ButtonIconComponent,
],
- imports: [ NbCardModule, NbButtonModule, ButtonRoutingModule ],
+ imports: [ NbCardModule, NbButtonModule, NbIconModule, ButtonRoutingModule ],
})
export class ButtonModule {}
diff --git a/src/playground/with-layout/chat/bot-replies.ts b/src/playground/with-layout/chat/bot-replies.ts
index 23d8cd1765..ac2859d0be 100644
--- a/src/playground/with-layout/chat/bot-replies.ts
+++ b/src/playground/with-layout/chat/bot-replies.ts
@@ -100,7 +100,7 @@ export const botReplies = [
files: [
{
url: fileLink,
- icon: 'nb-compose',
+ icon: 'file-text-outline',
},
{
url: '',
@@ -111,7 +111,7 @@ export const botReplies = [
type: 'image/jpeg',
},
],
- icon: 'nb-compose',
+ icon: 'file-text-outline',
user: {
name: 'Bot',
avatar: botAvatar,
@@ -130,10 +130,10 @@ export const botReplies = [
files: [
{
url: fileLink,
- icon: 'nb-compose',
+ icon: 'file-text-outline',
},
],
- icon: 'nb-compose',
+ icon: 'file-text-outline',
user: {
name: 'Bot',
avatar: botAvatar,
diff --git a/src/playground/with-layout/chat/chat-conversation-showcase.component.ts b/src/playground/with-layout/chat/chat-conversation-showcase.component.ts
index 9f85f64e62..9f26e592a1 100644
--- a/src/playground/with-layout/chat/chat-conversation-showcase.component.ts
+++ b/src/playground/with-layout/chat/chat-conversation-showcase.component.ts
@@ -27,7 +27,7 @@ export class ChatConversationShowcaseComponent {
return {
url: file.src,
type: file.type,
- icon: 'nb-compose',
+ icon: 'file-text-outline',
};
});
diff --git a/src/playground/with-layout/chat/chat-drop.component.ts b/src/playground/with-layout/chat/chat-drop.component.ts
index c5ba3fc182..8559355909 100644
--- a/src/playground/with-layout/chat/chat-drop.component.ts
+++ b/src/playground/with-layout/chat/chat-drop.component.ts
@@ -33,7 +33,7 @@ export class ChatDropComponent {
return {
url: file.src,
type: file.type,
- icon: 'nb-compose',
+ icon: 'file-text-outline',
};
});
diff --git a/src/playground/with-layout/chat/chat-message-types-showcase.component.ts b/src/playground/with-layout/chat/chat-message-types-showcase.component.ts
index 9b8f95c275..d6b6d9e9d8 100644
--- a/src/playground/with-layout/chat/chat-message-types-showcase.component.ts
+++ b/src/playground/with-layout/chat/chat-message-types-showcase.component.ts
@@ -51,7 +51,7 @@ import { Component } from '@angular/core';
sender="John Doe"
[reply]="true"
[date]="date"
- [files]="[ { url: 'http://google.com', icon: 'nb-compose' } ]"
+ [files]="[ { url: 'http://google.com', icon: 'file-text-outline' } ]"
[avatar]="'https://i.gifer.com/no.gif'">
+
+
+
+
+
+
+
+
diff --git a/src/playground/with-layout/icon/icon-colors.component.ts b/src/playground/with-layout/icon/icon-colors.component.ts
new file mode 100644
index 0000000000..f5825d1b58
--- /dev/null
+++ b/src/playground/with-layout/icon/icon-colors.component.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'nb-icon-colors',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: './icon-colors.component.html',
+})
+export class IconColorsComponent {
+}
diff --git a/src/playground/with-layout/icon/icon-routing.module.ts b/src/playground/with-layout/icon/icon-routing.module.ts
new file mode 100644
index 0000000000..4f4541cdf3
--- /dev/null
+++ b/src/playground/with-layout/icon/icon-routing.module.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Route } from '@angular/router';
+
+import { IconShowcaseComponent } from './icon-showcase.component';
+import { IconColorsComponent } from './icon-colors.component';
+
+const routes: Route[] = [
+ {
+ path: 'icon-showcase.component',
+ component: IconShowcaseComponent,
+ },
+ {
+ path: 'icon-colors.component',
+ component: IconColorsComponent,
+ },
+];
+
+@NgModule({
+ imports: [ RouterModule.forChild(routes) ],
+ exports: [ RouterModule ],
+})
+export class IconRoutingModule {}
diff --git a/src/playground/with-layout/icon/icon-showcase.component.html b/src/playground/with-layout/icon/icon-showcase.component.html
new file mode 100644
index 0000000000..9033bceb67
--- /dev/null
+++ b/src/playground/with-layout/icon/icon-showcase.component.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/src/playground/with-layout/icon/icon-showcase.component.ts b/src/playground/with-layout/icon/icon-showcase.component.ts
new file mode 100644
index 0000000000..a2e3221506
--- /dev/null
+++ b/src/playground/with-layout/icon/icon-showcase.component.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'nb-icon-showcase',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: './icon-showcase.component.html',
+})
+export class IconShowcaseComponent {
+
+ constructor() { }
+}
diff --git a/src/playground/with-layout/icon/icon.module.ts b/src/playground/with-layout/icon/icon.module.ts
new file mode 100644
index 0000000000..42f4ea29bb
--- /dev/null
+++ b/src/playground/with-layout/icon/icon.module.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NbIconModule, NbButtonModule, NbCardModule } from '@nebular/theme';
+
+import { IconRoutingModule } from './icon-routing.module';
+import { IconShowcaseComponent } from './icon-showcase.component';
+import { IconColorsComponent } from './icon-colors.component';
+
+@NgModule({
+ declarations: [
+ IconShowcaseComponent,
+ IconColorsComponent,
+ ],
+ imports: [
+ CommonModule,
+ NbIconModule,
+ NbButtonModule,
+ NbCardModule,
+ IconRoutingModule,
+ ],
+})
+export class IconModule {}
diff --git a/src/playground/with-layout/menu/menu-link-params.component.ts b/src/playground/with-layout/menu/menu-link-params.component.ts
index 51d41780ba..3502d53335 100644
--- a/src/playground/with-layout/menu/menu-link-params.component.ts
+++ b/src/playground/with-layout/menu/menu-link-params.component.ts
@@ -41,7 +41,7 @@ export class MenuLinkParamsComponent {
{
title: 'Menu item with icon',
link: '/example/menu/menu-link-params.component',
- icon: 'nb-search',
+ icon: 'search-outline',
},
{
title: 'Hidden menu item',
diff --git a/src/playground/with-layout/menu/menu-service-items.ts b/src/playground/with-layout/menu/menu-service-items.ts
index cb6faa093b..63948c6647 100644
--- a/src/playground/with-layout/menu/menu-service-items.ts
+++ b/src/playground/with-layout/menu/menu-service-items.ts
@@ -2,43 +2,43 @@ export const MENU_ITEMS = [
{
title: 'Home',
link: '/example/menu/menu-service.component',
- icon: 'nb-home',
+ icon: 'home-outline',
home: true,
},
{
title: 'User account',
link: '/example/menu/menu-service.component/2',
- icon: 'nb-person',
+ icon: 'person-outline',
},
{
title: 'Shop',
- icon: 'nb-e-commerce',
+ icon: 'shopping-cart-outline',
expanded: true,
children: [
{
title: 'Services',
link: '/example/menu/menu-service.component/3/1',
- icon: 'nb-gear',
+ icon: 'settings-outline',
},
{
title: 'Hardware',
link: '/example/menu/menu-service.component/3/2',
- icon: 'nb-lightbulb',
+ icon: 'bulb-outline',
},
{
title: 'Software',
- icon: 'nb-grid-a-outline',
+ icon: 'grid-outline',
expanded: true,
children: [
{
title: 'Open Source',
link: '/example/menu/menu-service.component/3/3/1',
- icon: 'nb-grid-b',
+ icon: 'grid-outline',
},
{
title: 'Commercial',
link: '/example/menu/menu-service.component/3/3/2',
- icon: 'nb-grid-b-outline',
+ icon: 'grid-outline',
queryParams: {param: 2},
fragment: 'fragment',
},
diff --git a/src/playground/with-layout/menu/menu-service.component.ts b/src/playground/with-layout/menu/menu-service.component.ts
index 076eab9e28..44434ec716 100644
--- a/src/playground/with-layout/menu/menu-service.component.ts
+++ b/src/playground/with-layout/menu/menu-service.component.ts
@@ -43,7 +43,7 @@ export class MenuServiceComponent implements OnDestroy {
this.menuService.addItems([{
title: '@nebular/theme',
target: '_blank',
- icon: 'nb-plus',
+ icon: 'plus-outline',
url: 'https://github.com/akveo/ngx-admin',
}], 'menu');
}
diff --git a/src/playground/with-layout/menu/menu-showcase.component.ts b/src/playground/with-layout/menu/menu-showcase.component.ts
index 37235f6983..20c9a4c356 100644
--- a/src/playground/with-layout/menu/menu-showcase.component.ts
+++ b/src/playground/with-layout/menu/menu-showcase.component.ts
@@ -16,18 +16,22 @@ export class MenuShowcaseComponent {
items = [
{
title: 'Profile',
+ icon: 'person-outline',
link: [],
},
{
title: 'Change Password',
+ icon: 'lock-outline',
link: [],
},
{
title: 'Privacy Policy',
+ icon: 'checkmark-outline',
link: [],
},
{
title: 'Logout',
+ icon: 'unlock-outline',
link: [],
},
];
diff --git a/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html b/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
index f8202f279b..7482b19370 100644
--- a/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
+++ b/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
@@ -2,11 +2,11 @@
-
+
-
+
diff --git a/src/playground/with-layout/tabset/route-tabset-showcase.component.ts b/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
index e62cc39020..935e1efcdb 100644
--- a/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
+++ b/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
@@ -20,18 +20,18 @@ export class RouteTabsetShowcaseComponent {
tabs: any[] = [
{
title: 'Users',
- icon: 'nb-person',
+ icon: 'person',
route: './tab1',
},
{
title: 'Orders',
- icon: 'nb-notifications',
+ icon: 'notifications',
responsive: true,
route: [ './tab2' ],
},
{
title: 'Transaction',
- icon: 'nb-notifications',
+ icon: 'notifications',
responsive: true,
disabled: true,
},
diff --git a/src/playground/with-layout/tabset/tabset-icon.component.html b/src/playground/with-layout/tabset/tabset-icon.component.html
index 243dfb8c03..38bb6703c5 100644
--- a/src/playground/with-layout/tabset/tabset-icon.component.html
+++ b/src/playground/with-layout/tabset/tabset-icon.component.html
@@ -2,13 +2,13 @@
-
+
List of users.
-
+
List of orders.
-
+
List of transactions.
@@ -20,13 +20,13 @@
-
+
List of users.
-
+
List of orders.
-
+
List of transactions.
@@ -38,13 +38,13 @@
-
+
List of users.
-
+
List of orders.
-
+
List of transactions.
diff --git a/src/playground/with-layout/toastr/toastr-icon.component.ts b/src/playground/with-layout/toastr/toastr-icon.component.ts
index 160efdf482..c887c34e14 100644
--- a/src/playground/with-layout/toastr/toastr-icon.component.ts
+++ b/src/playground/with-layout/toastr/toastr-icon.component.ts
@@ -6,7 +6,7 @@ import { NbToastrService } from '@nebular/theme';
template: `
-
+
`,
styles: [
`
@@ -32,6 +32,6 @@ export class ToastrIconComponent {
}
showToast(icon) {
- this.toastrService.show('Message', `Toast: ${++this.index}`, { icon });
+ this.toastrService.show('Message', `Toast: ${++this.index}`, { icon, iconPack: 'eva' });
}
}
diff --git a/src/playground/with-layout/tooltip/tooltip-with-icon.component.html b/src/playground/with-layout/tooltip/tooltip-with-icon.component.html
index 2ecdc5964e..a2701aeeac 100644
--- a/src/playground/with-layout/tooltip/tooltip-with-icon.component.html
+++ b/src/playground/with-layout/tooltip/tooltip-with-icon.component.html
@@ -1,2 +1,2 @@
-
-
+
+
diff --git a/src/playground/with-layout/tree-grid/tree-grid-showcase.component.ts b/src/playground/with-layout/tree-grid/tree-grid-showcase.component.ts
index 3802e915de..bfeb172205 100644
--- a/src/playground/with-layout/tree-grid/tree-grid-showcase.component.ts
+++ b/src/playground/with-layout/tree-grid/tree-grid-showcase.component.ts
@@ -108,7 +108,7 @@ export class TreeGridShowcaseComponent {
-
+
`,
})
diff --git a/src/playground/with-layout/tree-grid/tree-grid.module.ts b/src/playground/with-layout/tree-grid/tree-grid.module.ts
index d7435175c6..9dd7890561 100644
--- a/src/playground/with-layout/tree-grid/tree-grid.module.ts
+++ b/src/playground/with-layout/tree-grid/tree-grid.module.ts
@@ -6,7 +6,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { NbCardModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
+import { NbCardModule, NbIconModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
import { FsIconComponent, TreeGridShowcaseComponent } from './tree-grid-showcase.component';
import { TreeGridRoutingModule } from './tree-grid-routing.module';
@@ -19,7 +19,7 @@ import { TreeGridDisableClickToggleComponent } from './tree-grid-disable-click-t
import { TreeGridCustomNodeStructureComponent } from './tree-grid-custom-node-structure.component';
@NgModule({
- imports: [ CommonModule, NbTreeGridModule, TreeGridRoutingModule, NbCardModule, NbInputModule ],
+ imports: [ CommonModule, NbTreeGridModule, TreeGridRoutingModule, NbCardModule, NbInputModule, NbIconModule ],
declarations: [
FsIconComponent,
TreeGridShowcaseComponent,
diff --git a/src/playground/with-layout/typography/typography-showcase.component.html b/src/playground/with-layout/typography/typography-showcase.component.html
index c1845c09be..7a1ae47b27 100644
--- a/src/playground/with-layout/typography/typography-showcase.component.html
+++ b/src/playground/with-layout/typography/typography-showcase.component.html
@@ -1,4 +1,4 @@
-
+
Font Colors
diff --git a/src/playground/with-layout/with-layout-routing.module.ts b/src/playground/with-layout/with-layout-routing.module.ts
index e5ececd830..4c6d689185 100644
--- a/src/playground/with-layout/with-layout-routing.module.ts
+++ b/src/playground/with-layout/with-layout-routing.module.ts
@@ -157,6 +157,10 @@ const routes: Route[] = [
path: 'typography',
loadChildren: './typography/typography.module#TypographyModule',
},
+ {
+ path: 'icon',
+ loadChildren: './icon/icon.module#IconModule',
+ },
],
},
];
diff --git a/src/playground/without-layout/context-menu/context-menu-test.component.ts b/src/playground/without-layout/context-menu/context-menu-test.component.ts
index 75a876e79a..8d04488da1 100644
--- a/src/playground/without-layout/context-menu/context-menu-test.component.ts
+++ b/src/playground/without-layout/context-menu/context-menu-test.component.ts
@@ -33,7 +33,7 @@ export class ContextMenuTestComponent {
];
itemsWithIcons = [
- { title: 'Profile', link: '/user', icon: 'nb-compose' },
- { title: 'Logout', link: '/popover', icon: 'nb-gear' },
+ { title: 'Profile', link: '/user', icon: 'person-outline' },
+ { title: 'Logout', link: '/popover', icon: 'settings-outline' },
];
}
diff --git a/src/playground/without-layout/layout/layout-subheader.component.html b/src/playground/without-layout/layout/layout-subheader.component.html
index f20a847973..2a175a46c1 100644
--- a/src/playground/without-layout/layout/layout-subheader.component.html
+++ b/src/playground/without-layout/layout/layout-subheader.component.html
@@ -5,9 +5,9 @@
-
-
-
+
+
+
diff --git a/src/playground/without-layout/menu/menu-test.component.ts b/src/playground/without-layout/menu/menu-test.component.ts
index 3ae8e4307e..73d6642a3c 100644
--- a/src/playground/without-layout/menu/menu-test.component.ts
+++ b/src/playground/without-layout/menu/menu-test.component.ts
@@ -46,23 +46,23 @@ export class MenuTestComponent implements OnInit, OnDestroy {
{
title: 'Menu Items',
group: true,
- icon: 'nb-keypad',
+ icon: 'home-outline',
},
{
title: 'Menu #1',
link: '/menu/menu-test.component/1',
- icon: 'nb-keypad',
+ icon: 'home-outline',
queryParams: { param: 1 },
fragment: '#fragment',
},
{
title: 'Menu #2',
link: '/menu/menu-test.component/2',
- icon: 'nb-keypad',
+ icon: 'home-outline',
},
{
title: 'Menu #3',
- icon: 'nb-keypad',
+ icon: 'home-outline',
children: [
{
title: 'Menu #3.1',
@@ -100,19 +100,19 @@ export class MenuTestComponent implements OnInit, OnDestroy {
{
title: 'Menu Items',
group: true,
- icon: 'nb-keypad',
+ icon: 'home-outline',
},
{
title: 'Menu #1',
link: '/menu/menu-test.component/1',
- icon: 'nb-keypad',
+ icon: 'home-outline',
queryParams: { param: 1 },
fragment: '#fragment',
},
{
title: 'Menu #2',
link: '/menu/menu-test.component/2',
- icon: 'nb-keypad',
+ icon: 'home-outline',
},
];
secondMenuItems = [
@@ -123,19 +123,19 @@ export class MenuTestComponent implements OnInit, OnDestroy {
{
title: 'Menu #1',
link: '/menu/menu-test.component/1',
- icon: 'nb-keypad',
+ icon: 'home-outline',
pathMatch: 'partial',
},
{
title: 'Menu #12 + fragment',
link: '/menu/menu-test.component/12',
fragment: 'fragment',
- icon: 'nb-keypad',
+ icon: 'home-outline',
},
{
title: 'Menu #3',
link: '/menu/menu-test.component/3',
- icon: 'nb-keypad',
+ icon: 'home-outline',
},
];
thirdMenuItems = [
@@ -187,7 +187,7 @@ export class MenuTestComponent implements OnInit, OnDestroy {
[
{
title: 'Menu #3',
- icon: 'nb-keypad',
+ icon: 'home-outline',
children: [
{
title: 'Menu #3.1',