UI: icons refactoring

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -60,7 +60,7 @@
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
                         matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
                         matTooltipPosition="above">
-                  <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
+                  <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
                 </button>
                 <ng-template #addActionsMenu>
                   <button mat-icon-button [disabled]="isLoading$ | async"
@@ -74,7 +74,7 @@
                             [disabled]="isLoading$ | async"
                             [fxShow]="actionDescriptor.isEnabled()"
                             (click)="actionDescriptor.onAction($event)">
-                      <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                      <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                       <span>{{ actionDescriptor.name }}</span>
                     </button>
                   </mat-menu>
@@ -132,7 +132,7 @@
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event, dataSource.selection.selected)">
-              <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+              <tb-icon>{{actionDescriptor.icon}}</tb-icon>
             </button>
           </div>
         </mat-toolbar>
@@ -176,7 +176,7 @@
                         tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                         tooltipPosition="above"
                         [icon]="column.actionCell.icon"
-                        [mdiIcon]="column.actionCell.mdiIcon" [style]="column.actionCell.style">
+                        [style]="column.actionCell.style">
                       </tb-copy-button>
                     </ng-template>
                     <ng-template ngSwitchDefault>
@@ -185,9 +185,9 @@
                               matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
                               matTooltipPosition="above"
                               (click)="column.actionCell.onAction($event, entity)">
-                        <mat-icon [svgIcon]="column.actionCell.mdiIcon" [ngStyle]="column.actionCell.style">
+                        <tb-icon [ngStyle]="column.actionCell.style">
                           {{column.actionCell.icon}}
-                        </mat-icon>
+                        </tb-icon>
                       </button>
                     </ng-template>
                   </ng-container>
@@ -203,8 +203,9 @@
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"
                         (click)="column.actionDescriptor.onAction($event, entity)">
-                  <mat-icon [svgIcon]="column.actionDescriptor.mdiIcon" [ngStyle]="column.actionDescriptor.style">
-                    {{column.actionDescriptor.icon}}</mat-icon>
+                  <tb-icon [ngStyle]="column.actionDescriptor.style">
+                    {{column.actionDescriptor.icon}}
+                  </tb-icon>
                 </button>
               </mat-cell>
             </ng-container>
@@ -223,9 +224,9 @@
                           matTooltip="{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}"
                           matTooltipPosition="above"
                           (click)="actionDescriptor.onAction($event, entity)">
-                    <mat-icon svgIcon="{{ actionDescriptor.mdiIconFunction ? actionDescriptor.mdiIconFunction(entity) : actionDescriptor.mdiIcon }}"
-                              [ngStyle]="actionDescriptor.style">
-                      {{actionDescriptor.icon}}</mat-icon>
+                    <tb-icon [ngStyle]="actionDescriptor.style">
+                      {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                    </tb-icon>
                   </button>
                 </div>
                 <div fxHide [fxShow.lt-lg]="cellActionDescriptors.length !== 1" *ngIf="cellActionDescriptors.length">
@@ -239,9 +240,9 @@
                             [disabled]="isLoading$ | async"
                             [fxShow]="actionDescriptor.isEnabled(entity)"
                             (click)="actionDescriptor.onAction($event, entity)">
-                      <mat-icon svgIcon="{{ actionDescriptor.mdiIconFunction ? actionDescriptor.mdiIconFunction(entity) : actionDescriptor.mdiIcon }}"
-                                [ngStyle]="actionDescriptor.style">
-                        {{actionDescriptor.icon}}</mat-icon>
+                      <tb-icon [ngStyle]="actionDescriptor.style">
+                        {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                      </tb-icon>
                       <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
                     </button>
                   </mat-menu>

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html

@@ -63,7 +63,7 @@
                         matTooltip="{{ actionDescriptor.displayName }}"
                         matTooltipPosition="above"
                         (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                  <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                  <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                 </button>
               </ng-container>
             </div>
@@ -78,7 +78,7 @@
                   <button mat-menu-item *ngIf="actionDescriptor.icon"
                           [disabled]="isLoading$ | async"
                           (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                    <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                     <span>{{ actionDescriptor.displayName }}</span>
                   </button>
                 </ng-container>

ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts

@@ -57,8 +57,7 @@ export interface CellActionDescriptor<T extends BaseData<HasId>> {
   name: string;
   nameFunction?: (entity: T) => string;
   icon?: string;
-  mdiIcon?: string;
-  mdiIconFunction?: (entity: T) => string;
+  iconFunction?: (entity: T) => string;
   style?: any;
   isEnabled: (entity: T) => boolean;
   onAction: ($event: MouseEvent, entity: T) => any;

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html

@@ -304,7 +304,7 @@
                         [copyText]="mailSettings.get('redirectUri').value"
                         tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
                         tooltipPosition="above"
-                        mdiIcon="mdi:clipboard-arrow-left">
+                        icon="mdi:clipboard-arrow-left">
                       </tb-copy-button>
                     </mat-form-field>
                   </div>

ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html

@@ -100,7 +100,7 @@
                                           [copyText]="redirectURI(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
                                           tooltipPosition="above"
-                                          mdiIcon="mdi:clipboard-arrow-left">
+                                          icon="mdi:clipboard-arrow-left">
                                         </tb-copy-button>
                                       </mat-form-field>
                                       <mat-form-field fxFlex *ngIf="domainInfo.get('scheme').value === 'MIXED'" class="mat-block">
@@ -112,7 +112,7 @@
                                           [copyText]="redirectURIMixed(domainInfo)"
                                           tooltipText="{{ 'admin.oauth2.copy-redirect-uri' | translate }}"
                                           tooltipPosition="above"
-                                          mdiIcon="mdi:clipboard-arrow-left">
+                                          icon="mdi:clipboard-arrow-left">
                                         </tb-copy-button>
                                       </mat-form-field>
                                     </div>
@@ -171,7 +171,7 @@
                                           [copyText]="mobileInfo.get('appSecret').value"
                                           tooltipText="{{ 'admin.oauth2.copy-mobile-app-secret' | translate }}"
                                           tooltipPosition="above"
-                                          mdiIcon="mdi:clipboard-arrow-left">
+                                          icon="mdi:clipboard-arrow-left">
                                         </tb-copy-button>
                                         <mat-error *ngIf="mobileInfo.get('appSecret').invalid">
                                           {{ 'admin.oauth2.invalid-mobile-app-secret' | translate }}

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts

@@ -95,9 +95,9 @@ export class RuleTableConfigResolver implements Resolve<EntityTableConfig<Notifi
       name: '',
       nameFunction: (entity) =>
         this.translate.instant(entity.enabled ? 'notification.rule-disable' : 'notification.rule-enable'),
-      mdiIcon: 'mdi:toggle-switch',
+      icon: 'mdi:toggle-switch',
       isEnabled: () => true,
-      mdiIconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline',
+      iconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline',
       onAction: ($event, entity) => this.toggleEnableMode($event, entity)
     },
     {

ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts

@@ -107,7 +107,7 @@ export class SentTableConfigResolver implements Resolve<EntityTableConfig<Notifi
   private configureCellActions(): Array<CellActionDescriptor<NotificationRequestInfo>> {
     return [{
       name: this.translate.instant('notification.notify-again'),
-      mdiIcon: 'mdi:repeat-variant',
+      icon: 'mdi:repeat-variant',
       isEnabled: (request) => request.status !== NotificationRequestStatus.SCHEDULED,
       onAction: ($event, entity) => this.createRequest($event, entity)
     }];

ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts

@@ -146,7 +146,7 @@ export class UsersTableConfigResolver implements Resolve<EntityTableConfig<User>
           name: this.authority === Authority.TENANT_ADMIN ?
             this.translate.instant('user.login-as-tenant-admin') :
             this.translate.instant('user.login-as-customer-user'),
-          mdiIcon: 'mdi:login',
+          icon: 'mdi:login',
           isEnabled: () => true,
           onAction: ($event, entity) => this.loginAsUser($event, entity)
         }

ui-ngx/src/app/shared/components/button/copy-button.component.html

@@ -23,9 +23,9 @@
         [matTooltip]="matTooltipText"
         [matTooltipPosition]="matTooltipPosition"
         (click)="copy($event)">
-  <mat-icon [svgIcon]="mdiIcon" [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
+  <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
     {{ icon }}
-  </mat-icon>
+  </tb-icon>
   <ng-template #copiedTemplate>
     <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
   </ng-template>

ui-ngx/src/app/shared/components/button/copy-button.component.ts

@@ -39,9 +39,6 @@ export class CopyButtonComponent {
   @coerceBoolean()
   disabled = false;
 
-  @Input()
-  mdiIcon: string;
-
   @Input()
   icon: string;