feat(list): add ripple to secondary to md-list actions

closes #2340

src/components/list/list.js

@@ -131,6 +131,13 @@ function mdListItemDirective($mdAria, $mdConstant) {
 
         if (secondaryItem && secondaryItem.hasAttribute('ng-click')) {
           $mdAria.expect(secondaryItem, 'aria-label');
+          var buttonWrapper = angular.element('<md-button class="md-secondary-container">');
+          buttonWrapper.attr('ng-click', secondaryItem.getAttribute('ng-click'));
+          secondaryItem.removeAttribute('ng-click');
+          secondaryItem.setAttribute('tabindex', '-1');
+          secondaryItem.classList.remove('md-secondary');
+          buttonWrapper.append(secondaryItem);
+          secondaryItem = buttonWrapper[0];
         }
 
         // Check for a secondary item and move it outside

src/components/list/list.scss

@@ -72,6 +72,7 @@ md-list-item, md-list-item .md-list-item-inner {
   justify-content: flex-start;
   align-items: center;
 
+
   // Layout for controls in primary or secondary divs, or auto-infered first child
   & > div.md-primary > md-icon,
   & > div.md-secondary > md-icon,
@@ -130,13 +131,33 @@ md-list-item, md-list-item .md-list-item-inner {
   md-switch.md-secondary {
     margin-right: 0;
   }
+
+  button.md-button.md-secondary-container {
+    width: $list-item-primary-icon-width;
+    align-self: center;
+    margin-right: 0px;
+    box-sizing: content-box;
+    border-radius: 50%;
+    min-width: 0px;
+    .md-ripple,
+    .md-ripple-container {
+      border-radius: 50%;
+    }
+  }
+
+  .md-secondary-container,
   .md-secondary {
     margin-left: $list-item-secondary-left-margin;
     position: absolute;
     right: $list-item-padding-horizontal;
     top: 0;
   }
 
+  & > .md-button.md-secondary-container > .md-secondary {
+    margin-left: 0px;
+    position: static;
+  }
+
   & > p, & > .md-list-item-inner > p {
     flex: 1;
     margin: 0;