diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
index ac2bb73d05..40cb2cf406 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
+++ b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.html
@@ -36,7 +36,7 @@
                 (click)="changeSortDirection()"
                 [matTooltip]="getSortDirectionTooltipText()"
                 matTooltipPosition="above">
-          <mat-icon class="material-icons" [svgIcon]="getSortDirectionIcon()"></mat-icon>
+          <tb-icon class="material-icons">{{ getSortDirectionIcon() }}</tb-icon>
         </button>
         <button mat-icon-button
                 type="button"
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 0704ddffac..94119f492b 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/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 matMenuItemIcon>{{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>
@@ -181,7 +181,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>
@@ -190,9 +190,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>
@@ -208,8 +208,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>
@@ -228,9 +229,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">
@@ -244,9 +245,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 matMenuItemIcon [ngStyle]="actionDescriptor.style">
+                        {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
+                      </tb-icon>
                       <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
                     </button>
                   </mat-menu>
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index d1cd61f579..3f7da38fa6 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -81,6 +81,6 @@
           matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
           matTooltipPosition="above"
           (click)="dynamicMode = !dynamicMode">
-    <mat-icon class="tb-mat-20" [svgIcon]="dynamicMode ? 'mdi:numeric' : 'mdi:variable'"></mat-icon>
+    <tb-icon class="tb-mat-20">{{ dynamicMode ? 'mdi:numeric' : 'mdi:variable' }}</tb-icon>
   </button>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
index d4d8644aad..6fe2c7a101 100644
--- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-duration-predicate-value.component.html
@@ -71,6 +71,6 @@
           matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}"
           matTooltipPosition="above"
           (click)="dynamicMode = !dynamicMode">
-    <mat-icon class="tb-mat-20" [svgIcon]="dynamicMode ? 'mdi:numeric' : 'mdi:variable'"></mat-icon>
+    <tb-icon class="tb-mat-20">{{ dynamicMode ? 'mdi:numeric' : 'mdi:variable' }}</tb-icon>
   </button>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
index 5228fff081..30671fb04b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.html
@@ -148,7 +148,7 @@
                   <button mat-menu-item *ngIf="actionDescriptor.icon"
                           [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
                           (click)="onActionButtonClick($event, alarm, actionDescriptor)">
-                    <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                     <span>{{ actionDescriptor.displayName }}</span>
                   </button>
                 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
index c18a6bab14..f0a248f341 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/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 matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                     <span>{{ actionDescriptor.displayName }}</span>
                   </button>
                 </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index b52e3eaffd..9e87b0f0ff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -76,7 +76,7 @@
                               matTooltip="{{ actionDescriptor.displayName }}"
                               matTooltipPosition="above"
                               (click)="onActionButtonClick($event, row, actionDescriptor)">
-                        <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                        <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                       </button>
                     </ng-container>
                   </div>
@@ -92,7 +92,7 @@
                         <button mat-menu-item *ngIf="actionDescriptor.icon"
                                 [disabled]="isLoading$ | async"
                                 (click)="onActionButtonClick($event, row, actionDescriptor)">
-                          <mat-icon>{{actionDescriptor.icon}}</mat-icon>
+                          <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                           <span>{{ actionDescriptor.displayName }}</span>
                         </button>
                       </ng-container>
diff --git a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
index 614805ede5..78ee9ee7bc 100644
--- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
+++ b/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;
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index 926ad64644..571be3d75d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index 7cc06bc4af..61a3dfc848 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/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 }}
diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
index f547f997bd..94f363e878 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
+++ b/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)
     },
     {
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
index 290774b6e9..cc7a5db2ff 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-table-config.resolver.ts
+++ b/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)
     }];
diff --git a/ui-ngx/src/app/modules/home/pages/security/security.component.html b/ui-ngx/src/app/modules/home/pages/security/security.component.html
index 45460e086d..22f46843a3 100644
--- a/ui-ngx/src/app/modules/home/pages/security/security.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/security.component.html
@@ -86,23 +86,33 @@
             <h3 class="card-title" translate>security.password-requirement.password-requirements</h3>
             <h4 class="mat-h4" translate>security.password-requirement.at-least</h4>
             <p class="mat-body" *ngIf="passwordPolicy.minimumUppercaseLetters > 0">
-              <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notUpperCase') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
+              <tb-icon class="tb-mat-20">
+                {{ changePassword.get('newPassword').hasError('notUpperCase') ? 'mdi:circle-small' : 'mdi:check' }}
+              </tb-icon>
               {{ 'security.password-requirement.uppercase-letter' | translate : {count: passwordPolicy.minimumUppercaseLetters} }}
             </p>
             <p class="mat-body" *ngIf="passwordPolicy.minimumLowercaseLetters > 0">
-              <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notLowerCase') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
+              <tb-icon class="tb-mat-20">
+                {{ changePassword.get('newPassword').hasError('notLowerCase') ? 'mdi:circle-small' : 'mdi:check' }}
+              </tb-icon>
               {{ 'security.password-requirement.lowercase-letter' | translate : {count: passwordPolicy.minimumLowercaseLetters} }}
             </p>
             <p class="mat-body" *ngIf="passwordPolicy.minimumDigits > 0">
-              <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notNumeric') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
+              <tb-icon class="tb-mat-20">
+                {{ changePassword.get('newPassword').hasError('notNumeric') ? 'mdi:circle-small' : 'mdi:check' }}
+              </tb-icon>
               {{ 'security.password-requirement.digit' | translate : {count: passwordPolicy.minimumDigits} }}
             </p>
             <p class="mat-body" *ngIf="passwordPolicy.minimumSpecialCharacters > 0">
-              <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('notSpecial') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
+              <tb-icon class="tb-mat-20">
+                {{ changePassword.get('newPassword').hasError('notSpecial') ? 'mdi:circle-small' : 'mdi:check' }}
+              </tb-icon>
               {{ 'security.password-requirement.special-character' | translate : {count: passwordPolicy.minimumSpecialCharacters} }}
             </p>
             <p class="mat-body" *ngIf="passwordPolicy.minimumLength > 0">
-              <mat-icon class="tb-mat-20" [svgIcon]="changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check'"></mat-icon>
+              <tb-icon class="tb-mat-20">
+                {{ changePassword.get('newPassword').hasError('minLength') ? 'mdi:circle-small' : 'mdi:check' }}
+              </tb-icon>
               {{ 'security.password-requirement.character' | translate : {count: passwordPolicy.minimumLength} }}
             </p>
           </div>
diff --git a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
index ec194efcaa..18f590a251 100644
--- a/ui-ngx/src/app/modules/home/pages/user/users-table-config.resolver.ts
+++ b/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)
         }
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 640d467998..285fd85491 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/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">
-    {{ icon }}
-  </mat-icon>
+  <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
+    {{  icon || mdiIcon }}
+  </tb-icon>
   <ng-template #copiedTemplate>
     <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
   </ng-template>
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.ts b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
index b22cf575c0..0297faa0d0 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@@ -39,6 +39,7 @@ export class CopyButtonComponent {
   @coerceBoolean()
   disabled = false;
 
+  // @deprecated need to use icon input
   @Input()
   mdiIcon: string;