AngularJS 1.5 Multi Slot Transclusion

var app = angular.module('plunker', []);

app.controller('MainCtrl', function() {
  var vm = this;
});

app.directive('list', function() {
  return {
    restrict: 'AE',
    scope: {},
    transclude: true,
    replace: true,
    template: '<ul ng-transclude></ul>'
  }
});

app.directive('listItem', function() {
  return {
    restrict: 'AE',
    require: '^list',
    scope: {
      title: '@'
    },
    transclude: {
       'contentSlot': '?content',
       'iconSlot': '?icon'
    },
    replace: true,
    template:
    '<li>' +
      '<span ng-transclude="iconSlot"></span>' +
      '<span>'+
        '<b>{{title}}: </b>' +
        '<span ng-transclude="contentSlot">This is a default</span>' +
      '</span>' +
    '</li>'
  } 
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body class="content" ng-controller="MainCtrl as vm">
    <h1>AngularJS 1.5 Multi Slot Transclusion</h1>
    <br>
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <list>
            <list-item title="Football">
              <icon><img src="http://placehold.it/200x150"></icon>
              <content>is cool</content>
            </list-item>
            <list-item title="Table Tennis"></list-item>
            <list-item title="Football Table">
              <content>is the best</content>
              <icon class="glyphicon glyphicon-thumbs-up"></icon>
            </list-item>
          </list>
        </div>
      </div>
  </body>

</html>

/* Put your css in here */

ul > li {
  line-height: 50px;
}

.glyphicon.glyphicon-thumbs-up {
  font-size: 200%;
  padding-right: 20px;
}