feat(experimental): Icons add new directive

projects/demo/src/modules/experimental/badge/badge.template.html

@@ -66,11 +66,11 @@
             <p>
                 <tui-badge
                     *ngIf="contentType === 'with icon'"
+                    iconLeft="tuiIconCheck"
                     [appearance]="appearance"
                     [dot]="dot"
                     [size]="size"
                 >
-                    <tui-icon icon="tuiIconCheck"></tui-icon>
                     <div tuiFade>Taiga UI</div>
                 </tui-badge>
 

projects/demo/src/modules/experimental/badge/examples/3/index.html

@@ -2,36 +2,36 @@
     <h4 class="tui-space_vertical-1">Value with icon</h4>
     <tui-badge
         appearance="primary"
+        iconLeft="tuiIconBox"
         size="xl"
     >
-        <tui-icon icon="tuiIconBox"></tui-icon>
         x-large
     </tui-badge>
 
     <tui-badge
         appearance="primary"
+        iconLeft="tuiIconBox"
         size="l"
         class="tui-space_left-1"
     >
-        <tui-icon icon="tuiIconBox"></tui-icon>
         large
     </tui-badge>
 
     <tui-badge
         appearance="primary"
+        iconLeft="tuiIconBox"
         size="m"
         class="tui-space_left-1"
     >
-        <tui-icon icon="tuiIconBox"></tui-icon>
         medium
     </tui-badge>
 
     <tui-badge
         appearance="primary"
+        iconLeft="tuiIconBox"
         size="s"
         class="tui-space_left-1"
     >
-        <tui-icon icon="tuiIconBox"></tui-icon>
         small
     </tui-badge>
 </div>

projects/demo/src/modules/experimental/badge/examples/4/index.html

@@ -8,9 +8,9 @@
 
 <tui-badge
     appearance="accent"
+    iconLeft="tuiIconBox"
     size="l"
     class="badge tui-space_top-3"
 >
-    <tui-icon icon="tuiIconBox"></tui-icon>
     <div class="t-ellipsis">Very long value in badge</div>
 </tui-badge>

projects/demo/src/modules/experimental/badge/examples/5/index.html

@@ -1,9 +1,9 @@
 <tui-badge
     appearance="custom"
+    iconLeft="tuiIconLock"
     size="xl"
     class="custom-1"
 >
-    <tui-icon icon="tuiIconLock"></tui-icon>
     10 000 000 $
 </tui-badge>
 

projects/experimental/components/badge/badge.module.ts

@@ -1,10 +1,12 @@
 import {NgModule} from '@angular/core';
+import {TuiIconsDirective, TuiIconsModule} from '@taiga-ui/experimental/directives/icons';
 
 import {TuiBadgeComponent} from './badge.component';
 import {TuiBadgeDirective} from './badge.directive';
 
 @NgModule({
+    imports: [TuiIconsModule],
     declarations: [TuiBadgeComponent, TuiBadgeDirective],
-    exports: [TuiBadgeDirective],
+    exports: [TuiBadgeDirective, TuiIconsDirective],
 })
 export class TuiBadgeModule {}

projects/experimental/components/badge/badge.style.less

@@ -34,9 +34,10 @@ tui-badge,
     }
 
     > tui-svg,
-    > tui-icon {
-        width: var(--t-icon-size) !important;
-        height: var(--t-icon-size) !important;
+    > tui-icon,
+    &[tuiIcons]:before,
+    &[tuiIcons]:after {
+        font-size: var(--t-icon-size) !important;
     }
 
     &[data-appearance='error'] {

projects/experimental/components/button/button.directive.ts

@@ -6,9 +6,8 @@ import {
     Input,
     ViewEncapsulation,
 } from '@angular/core';
-import {TuiDirectiveStylesService, TuiStringHandler} from '@taiga-ui/cdk';
+import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
 import {MODE_PROVIDER, TUI_MODE, TuiBrightness} from '@taiga-ui/core';
-import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
 import {Observable} from 'rxjs';
 
 import {TUI_BUTTON_OPTIONS, TuiButtonOptions} from './button.options';
@@ -30,10 +29,6 @@ export class TuiButtonStylesComponent {}
     host: {
         tuiButtonNew: '',
         tuiAppearance: '',
-        '[class._icon-left]': 'iconLeft',
-        '[class._icon-right]': 'iconRight',
-        '[style.--t-mask-left]': '"url(" + resolver(iconLeft) + ")"',
-        '[style.--t-mask-right]': '"url(" + resolver(iconRight) + ")"',
         '[attr.data-size]': 'size',
         '[attr.data-appearance]': 'appearance',
         '($.data-mode.attr)': 'mode$',
@@ -46,14 +41,7 @@ export class TuiButtonDirective {
     @Input()
     appearance = this.options.appearance;
 
-    @Input()
-    iconLeft = '';
-
-    @Input()
-    iconRight = '';
-
     constructor(
-        @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
         @Inject(TUI_BUTTON_OPTIONS) private readonly options: TuiButtonOptions,
         @Inject(TUI_MODE) readonly mode$: Observable<TuiBrightness | null>,
         @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,

projects/experimental/components/button/button.module.ts

@@ -1,13 +1,14 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {TuiLoaderModule, TuiSvgModule} from '@taiga-ui/core';
+import {TuiIconsDirective, TuiIconsModule} from '@taiga-ui/experimental/directives/icons';
 
 import {TuiButtonComponent} from './button.component';
 import {TuiButtonDirective, TuiButtonStylesComponent} from './button.directive';
 
 @NgModule({
-    imports: [CommonModule, TuiSvgModule, TuiLoaderModule],
+    imports: [CommonModule, TuiSvgModule, TuiLoaderModule, TuiIconsModule],
     declarations: [TuiButtonComponent, TuiButtonDirective, TuiButtonStylesComponent],
-    exports: [TuiButtonComponent, TuiButtonDirective],
+    exports: [TuiButtonComponent, TuiButtonDirective, TuiIconsDirective],
 })
 export class TuiButtonModule {}

projects/experimental/components/button/button.style.less

@@ -33,7 +33,7 @@
         tui-svg,
         tui-icon,
         &:before {
-            width: 1rem;
+            font-size: 1rem;
         }
     }
 
@@ -48,8 +48,7 @@
         tui-svg,
         tui-icon,
         &:not([tuiIconButton][data-appearance='icon']):before {
-            width: 1rem;
-            height: 1rem;
+            font-size: 1rem;
         }
     }
 
@@ -101,28 +100,10 @@
         }
     }
 
-    &._icon-left:before {
-        content: '';
-    }
-
-    &._icon-right:after {
-        content: '';
-    }
-
-    &:before {
-        width: 1.5rem;
-        height: 1.5rem;
-        background: currentColor;
-        mask: var(--t-mask-left) no-repeat center/contain;
-    }
-
-    &:after {
-        width: 1rem;
-        height: 1rem;
-        background: currentColor;
+    &[tuiIcons]:after {
+        font-size: 1rem;
         margin-inline-start: 0.125rem;
         margin-inline-end: -0.125rem;
-        mask: var(--t-mask-right) no-repeat center/contain;
     }
 }
 

projects/experimental/components/icon/icon.style.less

@@ -3,8 +3,9 @@
 :host {
     position: relative;
     display: inline-block;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1em;
+    height: 1em;
+    font-size: 1.5rem;
     vertical-align: middle;
 
     &._duo {

projects/experimental/directives/icons/icons.component.ts

@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    template: '',
+    styleUrls: ['./icons.styles.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-icons',
+    },
+})
+export class TuiIconsComponent {}

projects/experimental/directives/icons/icons.directive.ts

@@ -0,0 +1,32 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {TuiDirectiveStylesService, TuiStringHandler} from '@taiga-ui/cdk';
+import {TUI_ICON_RESOLVER} from '@taiga-ui/experimental/tokens';
+
+import {TuiIconsComponent} from './icons.component';
+
+// TODO: Turn into a hostDirective in 4.0
+@Directive({
+    selector:
+        '[iconLeft]:is(button,tui-badge),[iconRight]:is(button,tui-badge),[tuiBadge][iconLeft],[tuiBadge][iconRight]',
+    host: {
+        tuiIcons: '',
+        '[class._icon-left]': 'iconLeft',
+        '[class._icon-right]': 'iconRight',
+        '[style.--t-mask-left]': '"url(" + resolver(iconLeft) + ")"',
+        '[style.--t-mask-right]': '"url(" + resolver(iconRight) + ")"',
+    },
+})
+export class TuiIconsDirective {
+    @Input()
+    iconLeft = '';
+
+    @Input()
+    iconRight = '';
+
+    constructor(
+        @Inject(TUI_ICON_RESOLVER) readonly resolver: TuiStringHandler<string>,
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiIconsComponent);
+    }
+}

projects/experimental/directives/icons/icons.module.ts

@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiIconsComponent} from './icons.component';
+import {TuiIconsDirective} from './icons.directive';
+
+@NgModule({
+    declarations: [TuiIconsComponent, TuiIconsDirective],
+    exports: [TuiIconsDirective],
+})
+export class TuiIconsModule {}

projects/experimental/directives/icons/icons.styles.less

@@ -0,0 +1,24 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiIcons] {
+    &._icon-left:before {
+        content: '';
+    }
+
+    &._icon-right:after {
+        content: '';
+    }
+
+    &:before,
+    &:after {
+        width: 1em;
+        height: 1em;
+        font-size: 1.5rem;
+        background: currentColor;
+        mask: var(--t-mask-left) no-repeat center/contain;
+    }
+
+    &:after {
+        mask: var(--t-mask-right) no-repeat center/contain;
+    }
+}

projects/experimental/directives/icons/index.ts

@@ -0,0 +1,3 @@
+export * from './icons.component';
+export * from './icons.directive';
+export * from './icons.module';

projects/experimental/directives/icons/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

projects/experimental/directives/index.ts

@@ -3,6 +3,7 @@ export * from '@taiga-ui/experimental/directives/button-vertical';
 export * from '@taiga-ui/experimental/directives/card';
 export * from '@taiga-ui/experimental/directives/cell';
 export * from '@taiga-ui/experimental/directives/fade';
+export * from '@taiga-ui/experimental/directives/icons';
 export * from '@taiga-ui/experimental/directives/progress-segmented';
 export * from '@taiga-ui/experimental/directives/sensitive';
 export * from '@taiga-ui/experimental/directives/surface';