feat(list): add icon support

angular · Apr 25, 2016 · 7b3698c · 7b3698c
1 parent a094a33
commit 7b3698c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 2 deletions.
diff --git a/src/components/list/list-item.html b/src/components/list/list-item.html
@@ -1,5 +1,5 @@
 <div class="md-list-item">
-  <ng-content select="[md-list-avatar]"></ng-content>
+  <ng-content select="[md-list-avatar],[md-list-icon]"></ng-content>
   <div class="md-list-text"><ng-content select="[md-line]"></ng-content></div>
   <ng-content></ng-content>
 </div>
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -3,6 +3,7 @@
 
 $md-list-side-padding: 16px;
 $md-list-avatar-size: 40px;
+$md-list-icon-size: 24px;
 
 /*  Normal list variables */
 $md-list-top-padding: 8px;
@@ -83,6 +84,13 @@ based on whether the list is in dense mode.
     height: $md-list-avatar-size;
     border-radius: 50%;
   }
+
+  [md-list-icon] {
+    width: $md-list-icon-size;
+    height: $md-list-icon-size;
+    border-radius: 50%;
+    padding: 4px;
+  }
 }
 
 /*

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
@@ -87,6 +87,7 @@ <h2>Nav lists</h2>
     </md-nav-list>
     <md-nav-list>
       <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+        <md-icon md-list-icon>folder</md-icon>
         <span md-line>{{ link.name }}</span>
         <span md-line class="demo-secondary-text"> Description </span>
       </a>

diff --git a/src/demo-app/list/list-demo.scss b/src/demo-app/list/list-demo.scss
@@ -13,6 +13,11 @@
     margin-top: 20px;
   }
 
+  [md-list-icon] {
+    color: white;
+    background: rgba(0,0,0,0.3);
+  }
+
   i {
     color: rgba(0,0,0,0.12);
   }

diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
@@ -1,12 +1,13 @@
 import {Component} from 'angular2/core';
 import {MdButton} from '../../components/button/button';
 import {MD_LIST_DIRECTIVES} from '../../components/list/list';
+import {MdIcon} from '../../components/icon/icon';
 
 @Component({
   selector: 'list-demo',
   templateUrl: 'demo-app/list/list-demo.html',
   styleUrls: ['demo-app/list/list-demo.css'],
-  directives: [MD_LIST_DIRECTIVES, MdButton]
+  directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon]
 })
 export class ListDemo {
   items: string[] = [