How to customize the ion-menu-button in Ionic 5

As a quick introduction, the ion-menu-button is a component that works together with the neat ion-menu. That means that once added, the ion-menu-button can open the ion-menu automatically 🤓. Therefore, we don't need to worry about anything since Ionic will handle the click event internally for us.

The thing is that sometimes you will have the requirement to show a different icon. Luckily for us, this can be achieved with the help of the ion-icon component.

As many of you might know, this component has the ability to render any of the icons found on the Ionicons library and custom assets like a local image and even better, an SVG.

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button>
      <ion-icon src="./assets/img/custom-menu.svg"></ion-icon>
    </ion-menu-button>
  </ion-buttons>
  <ion-title></ion-title>
</ion-toolbar>

To define a custom asset for our ion-icon is as easy as just passing the path of our file in the src property.

Since SVG's are just files based on the XML format, let's first create it by opening the command line and running the instruction below:

touch ./src/assets/img/custom-menu.svg

Next, let's open our newly created custom-menu.svg. You can do this manually using your file explorer, or if you're using VSCode... 😎

code ./src/assets/img/custom-menu.svg

Now copy and paste the XML below into the custom-menu.svg.

<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
  <defs>
    <style>
      .cls-1 {
        fill: currentColor;
      }
    </style>
  </defs>
  <g transform="translate(-23 -44)">
    <rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 44)"/>
    <rect class="cls-1" width="15" height="1.8" rx="2" transform="translate(23 52)"/>
    <rect class="cls-1" width="22" height="1.8" rx="2" transform="translate(23 60)"/>
  </g>
</svg>

The cool part is that using this technique it's possible to customize the theme by just adding the color attribute in the ion-menu-button.

<!-- Dark color -->
<ion-icon color="dark" src="./assets/img/custom-menu.svg"></ion-icon>

<!-- Secondary color -->
<ion-icon color="secondary" src="./assets/img/custom-menu.svg"></ion-icon>

<!-- Tertiary color -->
<ion-icon color="tertiary" src="./assets/img/custom-menu.svg"></ion-icon>

Demo:

That's it! As always, I hope you've learned something new today.

Hasta la próxima!