From 19b6ead1c5f3e602705eadd08c59347390edb237 Mon Sep 17 00:00:00 2001
From: IvanKitanov17 <ikitanov117@gmail.com>
Date: Thu, 5 Jan 2023 10:25:13 +0200
Subject: [PATCH 1/2] chore(List): Adding separate ripple for the igxListAction

---
 .../list-item-selection.component.html        |  11 +-
 .../list-item-selection.component.ts          | 100 ++++++++-------
 .../list-sample-4.component.html              |   9 +-
 .../list-sample-4/list-sample-4.component.ts  | 121 +++++++++---------
 .../list-sample-7.component.html              |  13 +-
 .../list-sample-7/list-sample-7.component.ts  |  10 +-
 .../list-sample-8.component.html              |   7 +-
 .../list-sample-8/list-sample-8.component.ts  |  11 +-
 8 files changed, 158 insertions(+), 124 deletions(-)

diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.html b/src/app/lists/list/list-item-selection/list-item-selection.component.html
index 3615331e49..9dc493091f 100644
--- a/src/app/lists/list/list-item-selection/list-item-selection.component.html
+++ b/src/app/lists/list/list-item-selection/list-item-selection.component.html
@@ -11,13 +11,14 @@
 <div class="list-sample">
     <igx-list>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-        <igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
-                       (click)="selectItem(contact)"
-                       *ngFor="let contact of contacts | igxFilter: filterContacts;">
+        <igx-list-item [ngClass]="contact.selected ? 'selected' : ''" (click)="selectItem(contact)"
+            *ngFor="let contact of contacts | igxFilter: filterContacts;">
             <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.ts b/src/app/lists/list/list-item-selection/list-item-selection.component.ts
index 1078f33e90..eaaf0654ca 100644
--- a/src/app/lists/list/list-item-selection/list-item-selection.component.ts
+++ b/src/app/lists/list/list-item-selection/list-item-selection.component.ts
@@ -2,67 +2,71 @@ import { Component } from '@angular/core';
 import { IgxFilterOptions } from 'igniteui-angular';
 
 @Component({
-  selector: 'app-list-item-selection',
-  templateUrl: './list-item-selection.component.html',
-  styleUrls: ['./list-item-selection.component.scss']
+    selector: 'app-list-item-selection',
+    templateUrl: './list-item-selection.component.html',
+    styleUrls: ['./list-item-selection.component.scss']
 })
 export class ListItemSelectionComponent {
     public searchContact: string;
 
     public contacts = [
-      {
-        isFavorite: false,
-        name: 'Terrance Orta',
-        phone: '770-504-2217',
-        photo: 'assets/images/men/27.jpg',
-        selected: false
-      },
-      {
-        isFavorite: true,
-        name: 'Richard Mahoney',
-        phone: '423-676-2869',
-        photo: 'assets/images/men/1.jpg',
-        selected: false
-      },
-      {
-        isFavorite: false,
-        name: 'Donna Price',
-        phone: '859-496-2817',
-        photo: 'assets/images/women/50.jpg',
-        selected: false
-      },
-      {
-        isFavorite: false,
-        name: 'Lisa Landers',
-        phone: '901-747-3428',
-        photo: 'assets/images/women/3.jpg',
-        selected: false
-      },
-      {
-        isFavorite: true,
-        name: 'Dorothy H. Spencer',
-        phone: '573-394-9254',
-        photo: 'assets/images/women/67.jpg',
-        selected: false
-      }
+        {
+            isFavorite: false,
+            name: 'Terrance Orta',
+            phone: '770-504-2217',
+            photo: 'assets/images/men/27.jpg',
+            selected: false
+        },
+        {
+            isFavorite: true,
+            name: 'Richard Mahoney',
+            phone: '423-676-2869',
+            photo: 'assets/images/men/1.jpg',
+            selected: false
+        },
+        {
+            isFavorite: false,
+            name: 'Donna Price',
+            phone: '859-496-2817',
+            photo: 'assets/images/women/50.jpg',
+            selected: false
+        },
+        {
+            isFavorite: false,
+            name: 'Lisa Landers',
+            phone: '901-747-3428',
+            photo: 'assets/images/women/3.jpg',
+            selected: false
+        },
+        {
+            isFavorite: true,
+            name: 'Dorothy H. Spencer',
+            phone: '573-394-9254',
+            photo: 'assets/images/women/67.jpg',
+            selected: false
+        }
     ];
 
     public toggleFavorite(contact: any, event: Event) {
-      event.stopPropagation();
-      contact.isFavorite = !contact.isFavorite;
+        event.stopPropagation();
+        contact.isFavorite = !contact.isFavorite;
     }
 
     public selectItem(item) {
-      if (!item.selected) {
-        this.contacts.forEach(c => c.selected = false);
-        item.selected = true;
-      }
+        if (!item.selected) {
+            this.contacts.forEach(c => c.selected = false);
+            item.selected = true;
+        }
     }
 
     get filterContacts() {
-      const fo = new IgxFilterOptions();
-      fo.key = 'name';
-      fo.inputValue = this.searchContact;
-      return fo;
+        const fo = new IgxFilterOptions();
+        fo.key = 'name';
+        fo.inputValue = this.searchContact;
+        return fo;
+    }
+
+    public mousedown(event: Event) {
+        event.stopPropagation();
     }
 }
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.html b/src/app/lists/list/list-sample-4/list-sample-4.component.html
index b17a9d5fa2..0a01c44fb8 100644
--- a/src/app/lists/list/list-sample-4/list-sample-4.component.html
+++ b/src/app/lists/list/list-sample-4/list-sample-4.component.html
@@ -15,11 +15,14 @@
 <div class="list-sample">
     <igx-list [displayDensity]="density">
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-        <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
+        <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item
+            *ngFor="let contact of contacts | igxFilter: filterContacts;">
             <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.ts b/src/app/lists/list/list-sample-4/list-sample-4.component.ts
index 6896c1e1db..b2915894cd 100644
--- a/src/app/lists/list/list-sample-4/list-sample-4.component.ts
+++ b/src/app/lists/list/list-sample-4/list-sample-4.component.ts
@@ -1,71 +1,76 @@
 import { Component, OnInit } from '@angular/core';
 import { DisplayDensity, IgxFilterOptions } from 'igniteui-angular';
 @Component({
-  selector: 'app-contact-list2',
-  styleUrls: ['./list-sample-4.component.scss'],
-  templateUrl: './list-sample-4.component.html'
+    selector: 'app-contact-list2',
+    styleUrls: ['./list-sample-4.component.scss'],
+    templateUrl: './list-sample-4.component.html'
 })
 export class ListSample4Component implements OnInit {
-  public searchContact: string;
+    public searchContact: string;
 
-  public contacts = [
-    {
-      isFavorite: false,
-      name: 'Terrance Orta',
-      phone: '770-504-2217',
-      photo: 'assets/images/men/27.jpg'
-    },
-    {
-      isFavorite: true,
-      name: 'Richard Mahoney',
-      phone: '423-676-2869',
-      photo: 'assets/images/men/1.jpg'
-    },
-    {
-      isFavorite: false,
-      name: 'Donna Price',
-      phone: '859-496-2817',
-      photo: 'assets/images/women/50.jpg'
-    },
-    {
-      isFavorite: false,
-      name: 'Lisa Landers',
-      phone: '901-747-3428',
-      photo: 'assets/images/women/3.jpg'
-    },
-    {
-      isFavorite: true,
-      name: 'Dorothy H. Spencer',
-      phone: '573-394-9254',
-      photo: 'assets/images/women/67.jpg'
-    }
-  ];
+    public contacts = [
+        {
+            isFavorite: false,
+            name: 'Terrance Orta',
+            phone: '770-504-2217',
+            photo: 'assets/images/men/27.jpg'
+        },
+        {
+            isFavorite: true,
+            name: 'Richard Mahoney',
+            phone: '423-676-2869',
+            photo: 'assets/images/men/1.jpg'
+        },
+        {
+            isFavorite: false,
+            name: 'Donna Price',
+            phone: '859-496-2817',
+            photo: 'assets/images/women/50.jpg'
+        },
+        {
+            isFavorite: false,
+            name: 'Lisa Landers',
+            phone: '901-747-3428',
+            photo: 'assets/images/women/3.jpg'
+        },
+        {
+            isFavorite: true,
+            name: 'Dorothy H. Spencer',
+            phone: '573-394-9254',
+            photo: 'assets/images/women/67.jpg'
+        }
+    ];
 
-  public density: DisplayDensity = 'comfortable';
-  public displayDensities;
+    public density: DisplayDensity = 'comfortable';
+    public displayDensities;
 
-  constructor() { }
+    constructor() { }
 
-  public ngOnInit() {
-    this.displayDensities = [
-        { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
-        { label: 'cosy', selected: this.density === 'cosy', togglable: true },
-        { label: 'compact', selected: this.density === 'compact', togglable: true }
-    ];
-  }
+    public ngOnInit() {
+        this.displayDensities = [
+            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        ];
+    }
 
-  public selectDensity(event) {
-    this.density = this.displayDensities[event.index].label;
-  }
+    public selectDensity(event) {
+        this.density = this.displayDensities[event.index].label;
+    }
 
-  public toggleFavorite(contact: any) {
-    contact.isFavorite = !contact.isFavorite;
-  }
+    public toggleFavorite(contact: any, event: Event) {
+        event.stopPropagation();
+        contact.isFavorite = !contact.isFavorite;
+    }
+
+    get filterContacts() {
+        const fo = new IgxFilterOptions();
+        fo.key = 'name';
+        fo.inputValue = this.searchContact;
+        return fo;
+    }
 
-  get filterContacts() {
-    const fo = new IgxFilterOptions();
-    fo.key = 'name';
-    fo.inputValue = this.searchContact;
-    return fo;
-  }
+    public mousedown(event: Event) {
+        event.stopPropagation();
+    }
 }
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.html b/src/app/lists/list/list-sample-7/list-sample-7.component.html
index f1edaf323d..6bb744a8b5 100644
--- a/src/app/lists/list/list-sample-7/list-sample-7.component.html
+++ b/src/app/lists/list/list-sample-7/list-sample-7.component.html
@@ -1,5 +1,6 @@
 <div style="width:300px; margin-bottom:20px">
-    <igx-slider id="slider" [minValue]="0.1" [maxValue]="0.9" [step]="0.1" [continuous]="true" [(ngModel)]="mainIgxList.panEndTriggeringThreshold"></igx-slider>
+    <igx-slider id="slider" [minValue]="0.1" [maxValue]="0.9" [step]="0.1" [continuous]="true"
+        [(ngModel)]="mainIgxList.panEndTriggeringThreshold"></igx-slider>
     <label>Threshold: {{panThreshold}}</label>
 </div>
 
@@ -17,11 +18,15 @@
             </div>
         </ng-template>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-        <igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink" igxRippleTarget=".igx-list__item-content">
-            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
+        <igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink"
+            igxRippleTarget=".igx-list__item-content">
+            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
+                [igxRippleCentered]="true" (mousedown)="thumbnailMousedown($event)"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+                [igxRippleCentered]="true" igxRippleTarget=".igx-list__item-actions"
+                (click)="toggleFavorite(contact, $event)" (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
     <igx-toast #toast></igx-toast>
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.ts b/src/app/lists/list/list-sample-7/list-sample-7.component.ts
index b9f8c752a5..4f3f84d8e0 100644
--- a/src/app/lists/list/list-sample-7/list-sample-7.component.ts
+++ b/src/app/lists/list/list-sample-7/list-sample-7.component.ts
@@ -51,7 +51,8 @@ export class ListSample7Component implements OnInit {
         this.contacts = Object.assign([], this.dataSource);
     }
 
-    public toggleFavorite(contact: any) {
+    public toggleFavorite(contact: any, event: Event) {
+        event.stopPropagation();
         contact.isFavorite = !contact.isFavorite;
     }
 
@@ -77,4 +78,11 @@ export class ListSample7Component implements OnInit {
         return Math.round(result * 100) + '%';
     }
 
+    public mousedown(event: Event) {
+        event.stopPropagation();
+    }
+
+    public thumbnailMousedown(event: Event) {
+        event.stopPropagation();
+    }
 }
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.html b/src/app/lists/list/list-sample-8/list-sample-8.component.html
index 77b6467bc0..da741028a4 100644
--- a/src/app/lists/list/list-sample-8/list-sample-8.component.html
+++ b/src/app/lists/list/list-sample-8/list-sample-8.component.html
@@ -2,10 +2,13 @@
     <igx-list>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
         <igx-list-item #item *ngFor="let contact of contacts">
-            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
+                [igxRippleCentered]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
 </div>
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.ts b/src/app/lists/list/list-sample-8/list-sample-8.component.ts
index 2152ea04b2..af74f5028b 100644
--- a/src/app/lists/list/list-sample-8/list-sample-8.component.ts
+++ b/src/app/lists/list/list-sample-8/list-sample-8.component.ts
@@ -8,10 +8,10 @@ import { IgxListComponent, IgxToastComponent } from 'igniteui-angular';
     templateUrl: './list-sample-8.component.html'
 })
 export class ListSample8Component implements OnInit {
-    @ViewChild('toast', { static : true })
+    @ViewChild('toast', { static: true })
     public toast: IgxToastComponent;
 
-    @ViewChild('mainIgxList', { static : true })
+    @ViewChild('mainIgxList', { static: true })
     public list: IgxListComponent;
 
     public contacts;
@@ -51,7 +51,12 @@ export class ListSample8Component implements OnInit {
         this.contacts = Object.assign([], this.dataSource);
     }
 
-    public toggleFavorite(contact: any) {
+    public toggleFavorite(contact: any, event: Event) {
+        event.stopPropagation();
         contact.isFavorite = !contact.isFavorite;
     }
+
+    public mousedown(event: Event) {
+        event.stopPropagation();
+    }
 }

From 973f6b2895658e4beeaeb34eb85a5eb38251b0a8 Mon Sep 17 00:00:00 2001
From: IvanKitanov17 <ikitanov117@gmail.com>
Date: Fri, 6 Jan 2023 14:45:23 +0200
Subject: [PATCH 2/2] refactor(List): Adjusting the correct ripple position of
 the favorite icon

---
 .../list-item-selection/list-item-selection.component.html | 2 +-
 .../list-item-selection/list-item-selection.component.scss | 1 +
 .../lists/list/list-sample-4/list-sample-4.component.html  | 2 +-
 .../lists/list/list-sample-4/list-sample-4.component.scss  | 1 +
 .../lists/list/list-sample-7/list-sample-7.component.html  | 7 +++----
 .../lists/list/list-sample-7/list-sample-7.component.scss  | 1 +
 .../lists/list/list-sample-7/list-sample-7.component.ts    | 4 ----
 .../lists/list/list-sample-8/list-sample-8.component.html  | 3 +--
 .../lists/list/list-sample-8/list-sample-8.component.scss  | 1 +
 9 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.html b/src/app/lists/list/list-item-selection/list-item-selection.component.html
index 9dc493091f..108ea341de 100644
--- a/src/app/lists/list/list-item-selection/list-item-selection.component.html
+++ b/src/app/lists/list/list-item-selection/list-item-selection.component.html
@@ -21,4 +21,4 @@
                 (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.scss b/src/app/lists/list/list-item-selection/list-item-selection.component.scss
index c7509ce6f6..7c4f8afb63 100644
--- a/src/app/lists/list/list-item-selection/list-item-selection.component.scss
+++ b/src/app/lists/list/list-item-selection/list-item-selection.component.scss
@@ -14,6 +14,7 @@
 
     igx-icon {
       cursor: pointer;
+      position: relative;
     }
 
     .search {
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.html b/src/app/lists/list/list-sample-4/list-sample-4.component.html
index 0a01c44fb8..4c9d7ec099 100644
--- a/src/app/lists/list/list-sample-4/list-sample-4.component.html
+++ b/src/app/lists/list/list-sample-4/list-sample-4.component.html
@@ -25,4 +25,4 @@
                 (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.scss b/src/app/lists/list/list-sample-4/list-sample-4.component.scss
index e6f06015a3..57bbc69d85 100644
--- a/src/app/lists/list/list-sample-4/list-sample-4.component.scss
+++ b/src/app/lists/list/list-sample-4/list-sample-4.component.scss
@@ -15,6 +15,7 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }
 
 .search {
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.html b/src/app/lists/list/list-sample-7/list-sample-7.component.html
index 6bb744a8b5..0cae545fb9 100644
--- a/src/app/lists/list/list-sample-7/list-sample-7.component.html
+++ b/src/app/lists/list/list-sample-7/list-sample-7.component.html
@@ -20,13 +20,12 @@
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
         <igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink"
             igxRippleTarget=".igx-list__item-content">
-            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
-                [igxRippleCentered]="true" (mousedown)="thumbnailMousedown($event)"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
-                [igxRippleCentered]="true" igxRippleTarget=".igx-list__item-actions"
-                (click)="toggleFavorite(contact, $event)" (mousedown)="mousedown($event)">star</igx-icon>
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
     <igx-toast #toast></igx-toast>
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.scss b/src/app/lists/list/list-sample-7/list-sample-7.component.scss
index 1681c304f7..9f7c17a981 100644
--- a/src/app/lists/list/list-sample-7/list-sample-7.component.scss
+++ b/src/app/lists/list/list-sample-7/list-sample-7.component.scss
@@ -11,6 +11,7 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }
 
 .listItemLeftPanningStyle {
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.ts b/src/app/lists/list/list-sample-7/list-sample-7.component.ts
index 4f3f84d8e0..f5a1800d8e 100644
--- a/src/app/lists/list/list-sample-7/list-sample-7.component.ts
+++ b/src/app/lists/list/list-sample-7/list-sample-7.component.ts
@@ -81,8 +81,4 @@ export class ListSample7Component implements OnInit {
     public mousedown(event: Event) {
         event.stopPropagation();
     }
-
-    public thumbnailMousedown(event: Event) {
-        event.stopPropagation();
-    }
 }
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.html b/src/app/lists/list/list-sample-8/list-sample-8.component.html
index da741028a4..4dfb4bc94b 100644
--- a/src/app/lists/list/list-sample-8/list-sample-8.component.html
+++ b/src/app/lists/list/list-sample-8/list-sample-8.component.html
@@ -2,8 +2,7 @@
     <igx-list>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
         <igx-list-item #item *ngFor="let contact of contacts">
-            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
-                [igxRippleCentered]="true"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.scss b/src/app/lists/list/list-sample-8/list-sample-8.component.scss
index 024f3d5340..48a23600ff 100644
--- a/src/app/lists/list/list-sample-8/list-sample-8.component.scss
+++ b/src/app/lists/list/list-sample-8/list-sample-8.component.scss
@@ -19,4 +19,5 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }