angularjs directive - transclude non working as expected - angularjs

Question

I'm writing a submenu directive, but I'm unable to use transclude properly for some reason. I've read and watched some videos, but it still doesn't work on my app and I can't figure out why.
Here's how I call the directive:
<my-submenu>
<div ng-click="test()">Test</div>
<div ng-click="test2()">Test 2</div>
<div ng-click="test3(id, type)">Test 3</div>
<div ui-sref="test ({id: id})">Test 4</div>
</my-submenu>
and the directive js is:
{
link: linkFunction,
restrict: 'E',
replace: true,
transclude: true,
templateUrl: './directives/submenu.tpl.html'
}
and the directive template is:
<div>
<!-- Menu Icon -->
<div class="icon ion-plus"></div>
<!-- Menu -->
<div>
<div ng-transclude></div>
</div>
</div>
Now, I though that using transclude and telling the directive template where to transclude, I should be able to add content to the directive template as well as content where I call if from my parent, and have it compiled togheter, but it is not doing that.
The resulting compiled code is the following:
<my-submenu>
<div>
<div ng-click="test()">Test</li>
<div ng-click="test2()">Test 2</li>
<div ng-click="test3(id, type)">Test 3</li>
<div ui-sref="test ({id: id})">Test 4</li>
</ul>
</my-submenu>
and as you can see, the Icon before the transclude is gone and not displayed at all. Why?
What am I doing wrong with the transclude? thanks

Answer 1

I do this with the same way as your and it works properly..
My directive:
myApp.directive('toolbarItem', function() {
return {
transclude:true,
restrict: 'E',
scope: {},
link: function(scope, element, attrs) {
},
templateUrl:'/toolbarItem.html'
}
});
And my template:
<div class="item" ng-transclude></div>