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 5e6eb8e73e..bb30df83e3 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
@@ -74,7 +74,7 @@
                             [disabled]="isLoading$ | async"
                             [fxShow]="actionDescriptor.isEnabled()"
                             (click)="actionDescriptor.onAction($event)">
-                      <tb-icon>{{actionDescriptor.icon}}</tb-icon>
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
                       <span>{{ actionDescriptor.name }}</span>
                     </button>
                   </mat-menu>
@@ -240,7 +240,7 @@
                             [disabled]="isLoading$ | async"
                             [fxShow]="actionDescriptor.isEnabled(entity)"
                             (click)="actionDescriptor.onAction($event, entity)">
-                      <tb-icon [ngStyle]="actionDescriptor.style">
+                      <tb-icon matMenuItemIcon [ngStyle]="actionDescriptor.style">
                         {{actionDescriptor.iconFunction ?  actionDescriptor.iconFunction(entity) : actionDescriptor.icon}}
                       </tb-icon>
                       <span>{{ actionDescriptor.nameFunction ? actionDescriptor.nameFunction(entity) : actionDescriptor.name }}</span>
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 4c50dedfd1..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
@@ -78,7 +78,7 @@
                   <button mat-menu-item *ngIf="actionDescriptor.icon"
                           [disabled]="isLoading$ | async"
                           (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <tb-icon>{{actionDescriptor.icon}}</tb-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/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/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 8b97b56d46..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
@@ -24,7 +24,7 @@
         [matTooltipPosition]="matTooltipPosition"
         (click)="copy($event)">
   <tb-icon [ngStyle]="style" *ngIf="!copied; else copiedTemplate">
-    {{ icon }}
+    {{  icon || mdiIcon }}
   </tb-icon>
   <ng-template #copiedTemplate>
     <mat-icon [ngStyle]="style" class="copied">done</mat-icon>
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 39ad8c029f..6176f307c2 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,10 @@ export class CopyButtonComponent {
   @coerceBoolean()
   disabled = false;
 
+  // @deprecated need to used icon
+  @Input()
+  mdiIcon: string;
+
   @Input()
   icon: string;