DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to customize the ion-menu-button in Ionic 5
Fernando Mendoza
Fernando Mendoza

Posted on

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>
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!

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git