Customizing Onsen UI Navigator Toolbar’s Icon

Onsen UI supports font-awesome which has 369 icons! That’s alot but no matter how many icons provided, there is no gurantee that it will support your app icon’s need.

What you need to do is specify the css class name in left-button-icon/right-button-icon.

<ons-navigator right-button-icon="my-icon">

Then in your css file. Specify the properties of your css class name as shown below.


Use css pseudo class as you normally do in css. In the above case, I use :active pseudo class.

That’s it! Happy coding!

Originally published at on February 14, 2014.