AngularJS and material icons

Material Icons are working fine in my AngularJS app.

In my template.html :

<i class="material-icons">&#xE86A;</i>

This works fine, the icon is displayed correctly.

But this code does not :

<div ng-repeat="x in pages">
    current icon : {{x.icon}}
    <br>
    <i class="material-icons">{{x.icon}}</i>
</div>

where pages is defined in the controller :

$scope.pages = [
{icon: "&#xE0B6;"},
{icon: "&#xE8F9;"},
{icon: "&#xE5CA;"}
];

I can see the right value of {{x.icon}}.

Why does

<i class="material-icons">{{x.icon}}</i>

not work ?