ナビゲーションとツールバーそれぞれに独自の画像を以下の感じで表示させたいと思います。

ただ方法とサイズがいまいち分からずおそらく強引(と思われる)で対応しみてました。まずはテンプレート
<ion-header>
<ion-navbar color="base">
<ion-title text-center class="nlogo">
<img src="./assets/img/header_logo.png" />
</ion-title>
<button ion-button menuToggle end>
<ion-icon name="apps"></ion-icon>
</button>
</ion-navbar>
</ion-header>
==
<ion-footer>
<ion-toolbar color="base">
<ion-buttons class="toolbar" padding-left padding-right>
<button ion-button icon-only>
<img src="./assets/img/t1.png" />
</button>
<button ion-button icon-only>
<img src="./assets/img/t2.png" />
</button>
<button ion-button icon-only>
<img src="./assets/img/t3.png" />
</button>
<button ion-button icon-only>
<img src="./assets/img/t4.png" />
</button>
<button ion-button icon-only>
<img src="./assets/img/t5.png" />
</button>
</ion-buttons>
そしてscss
.nlogo {
padding: 0 0 0 31px;
img {
vertical-align: middle;
width: 30px;
height: 30px;
}
}
.platform-ios .nlog {
padding: 0;
}
.toolbar {
display:flex;
img {
width: 26px;
height: auto;
}
}
もっとちゃんとした方法があるんでしょうが、見つかるまではこれで暫定対応。
各アイコンのサイズはchromeのDeveloper toolからioniconsのサイズを抽出しました
iphoneのionic viewで確認した問題なかったのでとりあえず大丈夫かと・・。
ちなみにナビゲーションバーですがandroidとwindowsは左右にアイコンがあると残りのスペースでセンタリングをしてしまうため中心からズレるのでpaddingで位置を修正。