Font awesome icons misaligned on converting into directives - css

Question

Icons are misaligned if I use directive and working fine if I used plain html code..
Method 1) font awesome icons using directives (icons are horizontally misaligned):
js:
app.directive("roIcon", function() {
return {
restrict: "E",
templateUrl: "templates/roIcon.html",
scope: {
type: "#"
}
};
});
"roIcon.html" template:
<span ng-if="type === 'add'">
<i class="fa fa-plus"></i>
</span>
<span class="fa-stack fa-lg stacked-icons" ng-if="type === 'export-file'">
<i class="fa fa-file-o fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
</span>
</span>
<span class="fa-stack fa-lg stacked-fork" ng-hide="isTile == true" ng-if="type === 'start-workflow'">
<i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-plus fa-small fa-stack-1x"></i>
</span>
</span>
Icons directive included in html:
<ro-icon type="add"></ro-icon>
<ro-icon type="export-file"></ro-icon>
<ro-icon type="start-workflow"></ro-icon>
Method 2) Direct inclusion of icons into html file is working fine:
<span>
<i class="fa fa-plus"></i>
</span>
<span class="fa-stack fa-lg stacked-icons" title="export file">
<i class="fa fa-file-o fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
</span>
</span>
<span class="fa-stack fa-lg stacked-fork">
<i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-plus fa-small fa-stack-1x"></i>
</span>
</span>
The only difference I can see in both the view source is the icons rendered with directives contains a wrapper non-html tag ...., the rest of the html is same.
I am not able to find out whether this non-html tag is making any difference in alignment as shown in figure?
Appreciate your help..