Appgyver: How to use Ionic Icons or images in super-navbar?

Question

I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:

<super-navbar>
    <super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
    <super-navbar-title>MyApp</super-navbar-title>
    <super-navbar-button side="right">Search</super-navbar-button>
  </super-navbar>

Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.

Thanks.

Answer 1

This can be accomplished right now by removing the <super-navbar> section and writing your own html header.

If you look in the layout file for your project there is an import statement as you mentioned:

<link rel="import" href="/components/supersonic/components/import.html">

There is a section that states:

* @name super-navbar-button

* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.

Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids

One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡

<super-navbar-button ng-click="toggleMenuDrawer()">
    &equiv;
</super-navbar-button>

They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i> It works in the main content area, but makes the navbar behave differently when nested in a <super> element.