fix(list): update demo page

src/components/list/list.scss

@@ -58,6 +58,8 @@ based on whether the list is in "dense" mode.
     flex-direction: column;
     width: 100%;
     padding: 0 $md-list-side-padding;
+    box-sizing: border-box;
+    overflow: hidden;
 
     &:first-child {
       padding: 0;
@@ -78,6 +80,7 @@ based on whether the list is in "dense" mode.
   [md-list-avatar] {
     width: $md-list-avatar-size;
     height: $md-list-avatar-size;
+    border-radius: 50%;
   }
 }
 

src/demo-app/list/list-demo.html

@@ -15,7 +15,6 @@
 
     <md-list>
       <md-list-item *ngFor="#contact of contacts">
-        <img md-list-avatar src="" alt="">
         <h3 md-line>{{contact.name}}</h3>
         <p md-line *ngIf="thirdLine">extra line</p>
         <p md-line class="demo-secondary-text">{{contact.headline}}</p>
@@ -24,6 +23,7 @@
 
     <md-list>
       <md-list-item *ngFor="#message of messages">
+        <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h3 md-line>{{message.from}}</h3>
         <p md-line>
           <span>{{message.subject}} -- </span>
@@ -51,7 +51,6 @@
 
     <md-list dense>
       <md-list-item *ngFor="#contact of contacts">
-        <img md-list-avatar src="" alt="">
         <h3 md-line>{{contact.name}}</h3>
         <p md-line class="demo-secondary-text">{{contact.headline}}</p>
       </md-list-item>
@@ -59,6 +58,7 @@
 
     <md-list dense>
       <md-list-item *ngFor="#message of messages">
+        <img md-list-avatar [src]="message.image" alt="Image of {{message.from}}">
         <h3 md-line>{{message.from}}</h3>
         <p md-line> {{message.subject}} </p>
         <p md-line class="demo-secondary-text">{{message.message}} </p>

src/demo-app/list/list-demo.ts

@@ -25,17 +25,20 @@ export class ListDemo {
     {
       from: 'Nancy',
       subject: 'Brunch?',
-      message: 'Did you want to go on Sunday? I was thinking that might work.'
+      message: 'Did you want to go on Sunday? I was thinking that might work.',
+      image: 'https://angular.io/resources/images/bios/julie-ralph.jpg'
     },
     {
       from: 'Mary',
       subject: 'Summer BBQ',
-      message: 'Wish I could come, but I have some prior obligations.'
+      message: 'Wish I could come, but I have some prior obligations.',
+      image: 'https://angular.io/resources/images/bios/juleskremer.jpg'
     },
     {
       from: 'Bobby',
       subject: 'Oui oui',
-      message: 'Do you have Paris reservations for the 15th? I just booked!'
+      message: 'Do you have Paris reservations for the 15th? I just booked!',
+      image: 'https://angular.io/resources/images/bios/jelbourn.jpg'
     }
   ];