如何将defaut菜单图标更改为ionic中的图像图标

Question

我正在尝试将菜单图标替换为离子应用程序中的图像图标。我有一个menu.html如下：

<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
 </ion-side-menu-content>

<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
 </header>
  <ion-content class="has-header">
  <ion-list>
    <ion-item menu-close ui-sref="app.home">
      Home
    </ion-item>
    <ion-item menu-close ui-sref="app.profile">
      Update Profile
    </ion-item>
    <ion-item menu-close ui-sref="app.project">
     Add Project
    </ion-item>

    <ion-item menu-close ng-click="logout();">
      Log Out
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

但是我不知道如何用图像图标替换菜单图标。你能帮忙吗

这是home.html：

 <ion-nav-buttons side="left">
 <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
 </ion-nav-buttons>
 <icon-view>
 <ion-pane>
 <ion-content>
 </ion-content>
 </ion-pane>
 </icon-view>

Answer 1

在 Ionic 4 中，只需在模板中使用以下代码

<ion-buttons slot="start"> <ion-menu-button> <img src='../../assets/icon/favicon.png'> </ion-menu-button> </ion-buttons>

Answer 2

对于Ionic 4+，只需用

<ion-menu-toggle>
    <img src='your-src'>
</ion-menu-toggle>

Answer 3

从 Ionic 5 开始，您可以在ion-icon其中添加任何其他内容，ion-menu-button如下所示：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>
        <ion-icon color="success" name="close"></ion-icon> // <--- here
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

同样，您还可以使用自定义 SVG 图标：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>
        <ion-icon 
          color="success" 
          src="assets/my-icons/custom-menu.svg" // <--- like this
        ></ion-icon>
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Answer 4

用标签替换button和类naviconimage

<ion-nav-buttons side="left">
 <img src="img/myImage.jpg" class="button button-icon button-clear" menu-toggle="left">
 </ion-nav-buttons>
 <icon-view>
 <ion-pane>
 <ion-content>
 </ion-content>
 </ion-pane>
 </icon-view>

小提琴示例