fix(list): styling discrepancies

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -69,7 +69,7 @@
         border-radius: var-get($theme, 'border-radius');
 
         @if $variant == 'bootstrap' {
-            border: rem(1px) solid var-get($theme, 'border-color');
+            border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
         }
 
         &:focus-visible {
@@ -137,13 +137,10 @@
         justify-content: center;
         border-radius: var-get($theme, 'item-border-radius');
         color: var-get($theme, 'item-text-color');
+        border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 
-        @if $bootstrap-theme or $variant == 'fluent' {
-            border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
-
-            &:last-of-type {
-                border-bottom: none;
-            }
+        &:last-of-type {
+            border-bottom: none;
         }
 
         &:hover {
@@ -285,6 +282,11 @@
             --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
         }
 
+        igx-icon,
+        igc-icon {
+            color: var-get($theme, 'item-thumbnail-color');
+        }
+
         &:empty {
             display: none;
         }

src/app/list/list.sample.html

@@ -55,7 +55,7 @@ <h5 class="sample-title">WC List</h5>
                     <span>Employees List</span>
                 </igc-list-header>
                 @for(employee of employeeItems; track employee){
-                    <igc-list-item>
+                    <igc-list-item [selected]="employee.selected">
                         @if(properties.addAvatarThumbnail) {
                             <igc-avatar slot="start" [src]="employee.imageURL"></igc-avatar>
                         }
@@ -69,7 +69,7 @@ <h5 class="sample-title">WC List</h5>
                             <span slot="subtitle">{{employee.position}}</span>
                         }
                         @if(properties.addCheckboxAction) {
-                            <igc-checkbox slot="end"></igc-checkbox>
+                            <igc-checkbox slot="end" [checked]="employee.selected"></igc-checkbox>
                         }
                         @if(properties.addIconAction) {
                             <igc-icon slot="end" name="info"></igc-icon>