Nav-bar image as title

hi is there a way of setting an image as a nav-bar title ?

Like this (?):

<nav-page ng-controller="AppCtrl" title="myTitle">
app.controller('AppCtrl', function($scope) {
  $scope.myTitle = '<img src="path/to/image.jpeg">';

no it outputs the html string

I’m also interested in the answer to this question - has anyone solved this problem?

This did work but title of page becomes <img src=...

Use the latest build. Html was not supported in nav-bar, It is fixed now.


If this is not working then open ionic-angular.js file and go to line number 2564 change '<h1 class="title" ng-bind="currentTitle"></h1>' to this '<h1 class="title" ng-bind-html="currentTitle"></h1>'

Thanks - it’s working for me now.

1 Like

@mrameezraja I’m also searching this info, but, your solution need to be implemented even into the ionic-angular-min file, otherwise don’t work on production environment (if you use minimized version of library). Thank you again for your tip.

Hey there!
It’s been a while since someone posted in this topic but i have a problem about putting image in header too.
I want to have something like this:
img view-title

Img should be positioned left and view title should be centered. I can’t make it work :frowning:
I have put img in ion-view or ion-nav-bar but it didnt work.
Any ideas?

EDIT: Did like this:

This way the title isn’t centered but still looks fine. Logo is on the very left and the title (in this case a

) is on the left too but to the right of the logo.

You should put image in left button and title as is.

  <div class="buttons">
    <button>style this button for image</button>
 <h2>Your title</h2>

If you’re using beta 14 or later you can simply use the ion-nav-title directive in your view templates.

This gives each view the ability to specify its own custom title element, such as an image or any HTML, rather than being text-only.

1 Like

use ion-nav-title