UI: use .mat-icon class selector instead of mat-icon tag for tb-icon component compatibility.

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss

@@ -104,7 +104,7 @@
   }
   mat-cell.tb-value-cell {
     cursor: pointer;
-    mat-icon {
+    .mat-icon {
       height: 24px;
       width: 24px;
       font-size: 24px;

ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss

@@ -49,7 +49,7 @@
       padding: 3px;
       height: 24px;
       cursor: move;
-      mat-icon {
+      .mat-icon {
         pointer-events: none;
       }
     }

ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.scss

@@ -71,7 +71,7 @@
           background-size: 18px 18px;
         }
 
-        mat-icon.node-icon {
+        .mat-icon.node-icon {
           width: 22px;
           min-width: 22px;
           height: 22px;
@@ -109,7 +109,7 @@
             background-size: 24px 24px;
           }
 
-          mat-icon.node-icon {
+          .mat-icon.node-icon {
             width: 40px;
             min-width: 40px;
             height: 40px;

ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.component.scss

@@ -64,7 +64,7 @@
           background-size: 18px 18px;
         }
 
-        mat-icon.node-icon {
+        .mat-icon.node-icon {
           width: 22px;
           min-width: 22px;
           height: 22px;
@@ -102,7 +102,7 @@
             background-size: 24px 24px;
           }
 
-          mat-icon.node-icon {
+          .mat-icon.node-icon {
             width: 40px;
             min-width: 40px;
             height: 40px;

ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss

@@ -31,7 +31,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    mat-icon {
+    .mat-icon {
       margin: auto !important;
     }
     span.mdc-button__label {

ui-ngx/src/app/modules/home/components/widget/lib/trip-animation/trip-animation.component.scss

@@ -54,7 +54,7 @@
         line-height: 24px;
         z-index: 999;
 
-        mat-icon {
+        .mat-icon {
           width: 24px;
           height: 24px;
 

ui-ngx/src/app/modules/home/menu/side-menu.component.scss

@@ -49,7 +49,7 @@
     &.tb-active {
       background-color: rgba(255, 255, 255, .15);
     }
-    mat-icon {
+    .mat-icon {
       margin-right: 8px;
       margin-left: 0;
       min-width: 1.125rem;

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.scss

@@ -117,7 +117,7 @@
             min-height: 32px;
             padding: 6px;
             line-height: 20px;
-            mat-icon {
+            .mat-icon {
               width: 20px;
               min-width: 20px;
               height: 20px;
@@ -216,7 +216,7 @@
       cursor: pointer;
       box-sizing: border-box;
 
-      mat-icon{
+      .mat-icon{
         width: 16px;
         min-width: 16px;
         height: 16px;

ui-ngx/src/app/modules/home/pages/rulechain/rulenode.component.scss

@@ -86,7 +86,7 @@
       background-color: #a3eaa9;
     }
 
-    mat-icon, img {
+    .mat-icon, img {
       margin: auto;
       width: 20px;
       min-width: 20px;

ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.scss

@@ -185,7 +185,7 @@ mat-toolbar.tb-edit-toolbar {
     white-space: nowrap;
     height: 28px;
 
-    mat-icon {
+    .mat-icon {
       height: 20px;
       width: 20px;
       font-size: 20px;

ui-ngx/src/app/shared/components/fab-toolbar.component.scss

@@ -74,7 +74,7 @@ mat-fab-toolbar {
     button.mat-mdc-fab {
       overflow: visible !important;
       opacity: .5;
-      mat-icon {
+      .mat-icon {
         position: relative;
         z-index: $z-index-fab + 2;
         opacity: 1;
@@ -146,7 +146,7 @@ mat-fab-toolbar {
       box-shadow: none;
       opacity: 1;
 
-      mat-icon {
+      .mat-icon {
         opacity: 0;
       }
     }
@@ -163,7 +163,7 @@ mat-fab-toolbar {
     mat-fab-trigger {
       button.mat-mdc-fab {
         transition: opacity .3s cubic-bezier(.55, 0, .55, .2) .2s;
-        mat-icon {
+        .mat-icon {
           transition: all $icon-delay ease-in;
         }
       }

ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.scss

@@ -51,7 +51,7 @@
       margin: 2px;
       line-height: 24px;
 
-      mat-icon {
+      .mat-icon {
         width: 24px;
         height: 24px;
 
@@ -93,7 +93,7 @@
     margin: 0;
     line-height: 28px;
 
-    mat-icon {
+    .mat-icon {
       width: 24px;
       height: 24px;
       font-size: 24px;

ui-ngx/src/app/shared/components/user-menu.component.scss

@@ -36,7 +36,7 @@
 
   }
 
-  mat-icon.tb-mini-avatar {
+  .mat-icon.tb-mini-avatar {
     width: 36px;
     height: 36px;
     margin: auto 8px;

ui-ngx/src/theme.scss

@@ -212,7 +212,7 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
       &.mat-primary {
         @include _mat-toolbar-inverse-color($primary);
         button.mat-mdc-icon-button {
-          mat-icon {
+          .mat-icon {
             color: mat.get-color-from-palette($primary);
           }
         }