How I can add an icon on header with center align in ionic?

Question

How I can add an "ion-ios-arrow-up" icon on header with center align in my ionic app like my concept below?

Its my HTML template:

<ion-view cache-view="false" view-title="Historical HPP">
    <ion-nav-bar class="nav-title-slide-ios7 bar-assertive" ng-click="click()"></ion-nav-bar> 
 <ion-content class="has-header"> 
Hello
  </ion-content>
</ion-view>

Thanks before

Answer 1

Just bind the title to the $scope variable

<ion-view title="{{title}}">

and in your controller

$scope.title = "Historical HPP <i class='ion-arrow-up-c'></i>";

Codepen here. Is this what your looking for?