Merge branch 'vNext' into vkombov/update-batch-editing-remote-paging-sample-15

ddincheva · web-flow · commit ff599c4fa7ca · 2023-03-09T09:47:07.000+02:00
diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.html b/projects/app-crm/src/app/grid-crm/grid-crm.component.html
@@ -60,7 +60,7 @@
         <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false" [filterable]="false">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner avatar-cell">
-                    <igx-avatar [src]="getPhoto(cell)" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="getPhoto(cell)" shape="circle" size="small"></igx-avatar>
                 </div>
             </ng-template>
         </igx-column>
diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html
@@ -34,7 +34,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
             <igx-column field="Name" header="Athlete" [width]="athleteColumnWidth" [hasSummary]="true">
                 <ng-template igxCell let-cell="cell">
                     <div class="cell__inner">
-                        <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"> </igx-avatar><span class="athlete_name">{{ cell.value }}</span>
+                        <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"> </igx-avatar><span class="athlete_name">{{ cell.value }}</span>
                         <igx-badge *ngIf="live" [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
                     </div>
 
@@ -92,7 +92,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
                     </div>
                     <div class="s-overlay__players">
                         <div class="s-overlay__player" [ngClass]="hasWinner ? 's-overlay__player--winner' : ''">
-                            <igx-avatar size="large" [roundShape]="true" [src]="winner.Avatar"></igx-avatar>
+                            <igx-avatar size="large" shape="circle" [src]="winner.Avatar"></igx-avatar>
                             <p class="s-overlay__player-name">{{ winner.Name }}</p>
                         </div>
                     </div>
@@ -112,7 +112,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
                                 <span>{{i + 1}}</span>
                                 <img [src]="getTrophyUrl(i)" alt="First place Trophy image" />
                             </div>
-                            <igx-avatar [size]="i === 0 ? 'large': 'medium'" [roundShape]="true" [src]="player.Avatar"></igx-avatar>
+                            <igx-avatar [size]="i === 0 ? 'large': 'medium'" shape="circle" [src]="player.Avatar"></igx-avatar>
                             <p class="s-overlay__player-name">{{ player.Name }}</p>
                         </div>
                     </ng-container>
diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.html
@@ -16,7 +16,7 @@
                             <div class="tabContent">
                                 <div class="avatarContainer">
                                     <igx-avatar src="{{dataItem.avatar}}"
-                                        [roundShape]="false" size="large"></igx-avatar>
+                                        shape="square" size="large"></igx-avatar>
                                     <h6>{{dataItem.name}}</h6>
                                 </div>
                                 <igx-divider [vertical]="true"></igx-divider>
diff --git a/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html b/src/app/data-display/badge/badge-sample-2/badge-sample-2.component.html
@@ -1,4 +1,4 @@
 <div class="wrapper">
-    <igx-avatar icon="person" [roundShape]="true" size="small"></igx-avatar>
-    <igx-badge icon="check" type="success"></igx-badge>
+    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+    <igx-badge icon="check" type="success" shape="square"></igx-badge>
 </div>
diff --git a/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html b/src/app/data-display/badge/badge-sample-3/badge-sample-3.component.html
@@ -5,7 +5,7 @@
   <igx-list-item *ngFor="let member of members">
     <div class="wrapper">
       <div>
-        <igx-avatar icon="person" [roundShape]="true" size="small"></igx-avatar>
+        <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
         <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
       </div>
       <div class="contact-container">
diff --git a/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html b/src/app/data-display/badge/badge-styling-sample/badge-styling-sample.component.html
@@ -5,7 +5,7 @@
     <igx-list-item *ngFor="let member of members">
         <div class="wrapper">
             <div>
-                <igx-avatar icon="person" [roundShape]="true" size="small"></igx-avatar>
+                <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
                 <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
             </div>
             <div class="contact-container">
diff --git a/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html b/src/app/data-display/chip/chip-area-sample/chip-area-sample.component.html
@@ -13,7 +13,7 @@
             class="chip-avatar-resized"
             igxPrefix
             [src]="chip.photo"
-            [roundShape]="true"
+            shape="circle"
             ></igx-avatar>
             {{chip.name}}
         </igx-chip>
diff --git a/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.html b/src/app/data-display/igxFor/igxFor-horizontal-sample/igxFor-horizontal.component.html
@@ -22,7 +22,7 @@
                 *igxFor="let item of data | igxFilter: fo; scrollOrientation : 'horizontal'; containerSize: '880px'; itemSize: '220px'">
                 <div class="item-container">
                     <div class="contact">
-                        <igx-avatar [src]="item.avatar" [roundShape]="true"></igx-avatar>
+                        <igx-avatar [src]="item.avatar" shape="circle"></igx-avatar>
                         <div class="contact__info">
                             <span class="name">{{item.name}}</span>
                         </div>
diff --git a/src/app/data-display/igxFor/igxFor.component.html b/src/app/data-display/igxFor/igxFor.component.html
@@ -18,7 +18,7 @@
                 igxRipple="pink"
                 igxRippleTarget=".igx-list__item"
                 *igxFor="let item of data | igxFilter: fo; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '50px'">
-                <igx-avatar igxListThumbnail [src]="item.avatar" [roundShape]="true"></igx-avatar>
+                <igx-avatar igxListThumbnail [src]="item.avatar" shape="circle"></igx-avatar>
             <span igxListLineTitle>{{ item.name }}</span>
             <igx-icon igxListAction [style.color]="item.favorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
             </igx-list-item>
diff --git a/src/app/grid/grid-sample-right-pinning/grid-right-pinning.component.html b/src/app/grid/grid-sample-right-pinning/grid-right-pinning.component.html
@@ -19,7 +19,7 @@
         <igx-column field="Avatar" header="Photo" dataType="string" width="80" [disablePinning]="true">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner avatar-cell">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                 </div>
             </ng-template>
         </igx-column>
diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html
@@ -14,7 +14,7 @@
         <igx-column field="Name" header="Athlete" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                     <span class="athlete_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
@@ -23,7 +23,7 @@
         <igx-column field="CountryName" header="Country" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.CountryFlag" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.CountryFlag" shape="circle" size="small"></igx-avatar>
                     <span class="country_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html
@@ -26,7 +26,7 @@
         <igx-column field="Name" header="Athlete" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                     <span class="athlete-name">{{ cell.value }}</span>
                 </div>
             </ng-template>
@@ -35,7 +35,7 @@
         <igx-column field="CountryName" header="Country" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.CountryFlag" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.CountryFlag" shape="circle" size="small"></igx-avatar>
                     <span class="country-name">{{ cell.value }}</span>
                 </div>
             </ng-template>
diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.html
@@ -13,7 +13,7 @@
         <igx-column field="Name" header="Athlete" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                     <span class="athlete_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
@@ -22,7 +22,7 @@
         <igx-column field="CountryName" header="Country" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.CountryFlag" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.CountryFlag" shape="circle" size="small"></igx-avatar>
                     <span class="country_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html
@@ -16,7 +16,7 @@
         <igx-column field="Name" header="Athlete" width="200" [sortable]="true">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                     <span class="athlete_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
@@ -25,7 +25,7 @@
         <igx-column field="CountryName" header="Country" width="200" [sortable]="true">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.CountryFlag" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.CountryFlag" shape="circle" size="small"></igx-avatar>
                     <span class="country_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
diff --git a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.html b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.html
@@ -14,7 +14,7 @@
         <igx-column field="Name" header="Athlete" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                     <span class="athlete_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
@@ -23,7 +23,7 @@
         <igx-column field="CountryName" header="Country" width="200">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">
-                    <igx-avatar [src]="cell.row.data.CountryFlag" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.CountryFlag" shape="circle" size="small"></igx-avatar>
                     <span class="country_name">{{ cell.value }}</span>
                 </div>
             </ng-template>
diff --git a/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html b/src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html
@@ -7,7 +7,7 @@
         <igx-column field="Avatar" header="Photo" dataType="string" width="80" [editable]="false">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner avatar-cell">
-                    <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.avatar" shape="circle" size="small"></igx-avatar>
                 </div>
             </ng-template>
         </igx-column>
diff --git a/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.html b/src/app/grid/grid-validator-service-extended/grid-validator-service-extended.component.html
@@ -4,7 +4,7 @@
         <igx-column field="Avatar" header="Photo" dataType="string" width="80" [editable]="false">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner avatar-cell">
-                    <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.avatar" shape="circle" size="small"></igx-avatar>
                 </div>
             </ng-template>
         </igx-column>
diff --git a/src/app/grid/grid-validator-service/grid-validator-service.component.html b/src/app/grid/grid-validator-service/grid-validator-service.component.html
@@ -7,7 +7,7 @@
         <igx-column field="Avatar" header="Photo" dataType="string" width="80" [editable]="false">
             <ng-template igxCell let-cell="cell">
                 <div>
-                    <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.avatar" shape="circle" size="small"></igx-avatar>
                 </div>
             </ng-template>
         </igx-column>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-sample-right-pinning/hierarchical-grid-right-pinning.component.html b/src/app/hierarchical-grid/hierarchical-grid-sample-right-pinning/hierarchical-grid-right-pinning.component.html
@@ -19,7 +19,7 @@
         <igx-column field="Avatar" header="Photo" dataType="string" width="80" [disablePinning]="true">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner avatar-cell">
-                    <igx-avatar [src]="cell.row.data.Avatar" [roundShape]="true" size="small"></igx-avatar>
+                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                 </div>
             </ng-template>
         </igx-column>
@@ -67,7 +67,7 @@
             <igx-column field="avatar" header="Agent's Photo" width="80">
                 <ng-template igxCell let-cell="cell">
                     <div class="cell__inner avatar-cell">
-                        <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
+                        <igx-avatar [src]="cell.row.data.avatar" shape="circle" size="small"></igx-avatar>
                     </div>
                 </ng-template>
             </igx-column>
diff --git a/src/app/interactions/ripple/ripple-stying/ripple-styling-sample.component.html b/src/app/interactions/ripple/ripple-stying/ripple-styling-sample.component.html
@@ -13,7 +13,7 @@ <h5>Icon</h5>
     </article>
     <article class="sample-column">
         <h5>Avatar</h5>
-        <igx-avatar class="shadow" igxRipple icon="person" [roundShape]="true" size="small">
+        <igx-avatar class="shadow" igxRipple icon="person" shape="circle" size="small">
         </igx-avatar>
     </article>
 </section>
diff --git a/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.html b/src/app/interactions/tooltip/tooltip-rich/tooltip-rich.component.html
@@ -4,7 +4,7 @@
     <div class="locationTooltip" #locationTooltip="tooltip" igxTooltip>
         <div class="locationTooltipContent">
             <igx-avatar class="logo" src="assets/images/card/avatars/igLogo.png" size="medium"
-                [roundShape]="false"></igx-avatar>
+                shape="square"></igx-avatar>
             <div>
                 <div>Infragistics Inc. HQ</div>
                 <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
diff --git a/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.html b/src/app/interactions/tooltip/tooltip-simple/tooltip-simple.component.html
@@ -1,5 +1,5 @@
 <igx-avatar class="avatar" #target="tooltipTarget" [hideDelay]="10000000" [igxTooltipTarget]="tooltipRef"
-            src="assets/images/avatar/10.jpg" size="medium" [roundShape]="true">
+            src="assets/images/avatar/10.jpg" size="medium" shape="circle">
 </igx-avatar>
 
 <div #tooltipRef="tooltip" igxTooltip>
diff --git a/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.html b/src/app/interactions/tooltip/tooltip-style/tooltip-style.component.html
@@ -1,5 +1,5 @@
 <igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
-    src="assets/images/avatar/10.jpg" size="medium" [roundShape]="true"
+    src="assets/images/avatar/10.jpg" size="medium" shape="circle"
     [igxToggleOutlet]="outlet">
 </igx-avatar>
 
diff --git a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.html b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.html
@@ -1,2 +1,2 @@
 <igx-avatar initials="JS" size="small"></igx-avatar>
-<igx-avatar icon="person" [roundShape]="true" size="small"></igx-avatar>
+<igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.html b/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.html
@@ -1 +1 @@
-<igx-avatar initials="JS" [roundShape]="true" size="medium"></igx-avatar>
+<igx-avatar initials="JS" shape="circle" size="medium"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html
@@ -1 +1 @@
-<igx-avatar src="assets/images/men/1.jpg" [roundShape]="true" size="large"></igx-avatar>
+<igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="large"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html
@@ -3,9 +3,9 @@
         <igx-avatar initials="JS" size="medium"></igx-avatar>
     </div>
     <div class="avatar-sample">
-        <igx-avatar src="assets/images/men/1.jpg" [roundShape]="true" size="medium"></igx-avatar>
+        <igx-avatar src="assets/images/men/1.jpg" shape="rounded" size="medium"></igx-avatar>
     </div>
     <div class="avatar-sample icon">
-        <igx-avatar icon="person" [roundShape]="true" size="medium"></igx-avatar>
+        <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
     </div>
 </article>
diff --git a/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.html b/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.html
@@ -1 +1 @@
-<igx-avatar icon="person" [roundShape]="true" size="small"></igx-avatar>
+<igx-avatar icon="person" shape="rounded" size="small"></igx-avatar>
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
@@ -3,6 +3,6 @@
         <igx-avatar initials="JS" size="medium"></igx-avatar>
     </div>
     <div class="avatar-sample icon">
-        <igx-avatar icon="person" [roundShape]="true" size="medium"></igx-avatar>
+        <igx-avatar icon="person" shape="circle" size="medium"></igx-avatar>
     </div>
 </article>
diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.html b/src/app/layouts/card/card-sample-4/card-sample-4.component.html
@@ -103,7 +103,7 @@ <h5 igxCardHeaderSubtitle>{{ cards[0].subtitle }}</h5>
     <article class="sample-column card-wrapper">
         <igx-card>
             <igx-card-header>
-                <igx-avatar src="assets/images/card/avatars/photographer.jpg" [roundShape]="true"></igx-avatar>
+                <igx-avatar src="assets/images/card/avatars/photographer.jpg" shape="circle"></igx-avatar>
                 <h4 igxCardHeaderTitle>Frank Carter</h4>
                 <h5 igxCardHeaderSubtitle>Photographer</h5>
             </igx-card-header>
diff --git a/src/app/lists/list/list-chat-sample/list-chat-sample.component.html b/src/app/lists/list/list-chat-sample/list-chat-sample.component.html
@@ -4,7 +4,7 @@
             <ng-template #othersMessage let-message="message" let-contact="contact" let-messageIndex="index">
                 <igx-list-item class="contact" *ngIf="isFirstMessage(messageIndex)">
                     <div class="contact__panel">
-                        <igx-avatar [src]="contact.photo" [roundShape]="true"></igx-avatar>
+                        <igx-avatar [src]="contact.photo" shape="circle"></igx-avatar>
                         <span class="message__info">
                             {{ contact.name }}, {{ message.timestamp | date: 'shortTime'}}
                         </span>
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
@@ -13,7 +13,7 @@
         <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-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
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
@@ -17,7 +17,7 @@
         <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-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
+            <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
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
@@ -20,7 +20,7 @@
         <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-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
             <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
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
diff --git a/src/app/lists/list/list.component.html b/src/app/lists/list/list.component.html
diff --git a/src/app/notifications/banner/banner-sample-4/banner-sample-4.component.html b/src/app/notifications/banner/banner-sample-4/banner-sample-4.component.html
diff --git a/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html b/src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html
diff --git a/src/app/theming/angular/angular-sample.component.html b/src/app/theming/angular/angular-sample.component.html
diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.html b/src/app/theming/bootstrap/bootstrap-sample.component.html
diff --git a/src/app/tree-grid/tree-grid-style/tree-grid-style.component.html b/src/app/tree-grid/tree-grid-style/tree-grid-style.component.html
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.html
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.html
diff --git a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.html b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.html
