JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
<div ng-app="MyApp">
    <md-list ng-controller="ListCtrl" ng-cloak>
      <md-subheader class="md-no-sticky">Checkbox with Secondary Action</md-subheader>
      <md-list-item ng-repeat="message in messages">
        <md-checkbox ng-model="message.selected"></md-checkbox>
        <p>{{message.title}}</p>
         <md-icon class="md-secondary" ng-click="doSecondaryAction($event)" aria-label="Chat" ng-if="message.showIcon">message</md-icon>
      </md-list-item>
    </md-list>
</div>

CSS

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

JavaScript

angular.module('MyApp', ['ngMaterial'])

.config(function($mdIconProvider) {
  $mdIconProvider
    .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
    .iconSet('device', 'img/icons/sets/device-icons.svg', 24)
    .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
    .defaultIconSet('img/icons/sets/core-icons.svg', 24);
})

.controller('ListCtrl', function ($scope, $mdDialog) {

  $scope.messages = [
    {id: 1, title: "Secondary action is still clickable", selected: false, showIcon:false},
    {id: 2, title: "Message B", selected: true, showIcon:true},
    {id: 3, title: "Message C", selected: true, showIcon:true},
  ];

  $scope.goToPerson = function(person, event) {
    $mdDialog.show(
      $mdDialog.alert()
        .title('Navigating')
        .content('Inspect ' + person)
        .ariaLabel('Person inspect demo')
        .ok('Neat!')
        .targetEvent(event)
    );
  };

  $scope.doSecondaryAction = function(event) {
    $mdDialog.show(
      $mdDialog.alert()
        .title('Secondary Action')
        .content('Secondary actions can be used for one click actions')
        .ariaLabel('Secondary click demo')
        .ok('Neat!')
        .targetEvent(event)
    );
  };
    
});