Merge pull request #8812 from ArtemDzhereleiko/AD/imp/rule-chain/rule-chain-icon

Added icon for rule chain selector

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html

@@ -15,13 +15,17 @@
     limitations under the License.
 
 -->
-<mat-select fxFlex
-            class="tb-rule-chain-select"
-            [required]="required"
-            [disabled]="disabled"
-            [(ngModel)]="ruleChainId"
-            (ngModelChange)="ruleChainIdChanged()">
-  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id">
-    {{ruleChain.name}}
-  </mat-option>
-</mat-select>
+<mat-form-field class="tb-rule-select" subscriptSizing="dynamic">
+  <mat-icon matPrefix>settings_ethernet</mat-icon>
+  <mat-select fxFlex
+              class="tb-rule-chain-select"
+              hideSingleSelectionIndicator="false"
+              [required]="required"
+              [disabled]="disabled"
+              [(ngModel)]="ruleChainId"
+              (ngModelChange)="ruleChainIdChanged()">
+    <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id">
+      {{ruleChain.name}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss

@@ -19,8 +19,16 @@
   padding: 0 6px;
   .tb-rule-chain-select {
     display: flex;
-    height: 48px;
     min-height: 100%;
     pointer-events: all;
   }
 }
+
+:host ::ng-deep {
+  .mat-mdc-form-field.tb-rule-select .mdc-text-field {
+    .mat-mdc-form-field-infix {
+      min-height: 48px;
+      padding: 12px 0;
+    }
+  }
+}