loading...
Cover image for How to customize the ion-menu-button in Ionic 5

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

fm3ndoza profile image Fernando Mendoza ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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

Alt Text

Demo:

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

Hasta la próxima!

Discussion

pic
Editor guide