SVG inside of button will cause js error

[rpb138]

I'm trying to put a hamburger icon inside of the button that controls the open of the slide-menu, clicking on the icon causes the following js error.

slide-menu.ie.js:1060 Uncaught TypeError: e.className.includes is not a function
at HTMLDocument. (slide-menu.ie.js:1060)
(anonymous) @ slide-menu.ie.js:1060

Button HTML:
<button id="navMobBtn" class="mobile-menu__button--open slide-menu__control" type="button" data-target="mobile-nav-menu" data-action="open" aria-controls="mobile-nav-menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="slide-menu__control hamburger-icon"></span> </button>

CSS:
.hamburger-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5); height: 2.5rem; width: 2.5rem; }

EDIT: This also happens when you just wrap a HTML element around the button text.
<span class="myClass">Open Menu</span>

[grubersjoe]

Thank you for pointing this out. In what browser did this occur? Since you're using the version for it: is it Internet Explorer? String.includes() is not available in older browsers, so this is probably the cause for the JS error. The includes() function should have been transpiled by Babel to something the browser understands.

Does this happen in Chrome or Firefox as well?

[rpb138]

I'm using Chrome, but it does happen in Firefox as well.

Here's what's weird. I created a CodePen to show you (https://codepen.io/rpb138/pen/Rdzgod), but now I'm getting a different error. It's saying that the property 'parentElement' is null.

However, I tried to do a little debugging after I entered this issue, and what I found was if you I made the button wide and centered the hamburger menu within the wide button, you can click on either side of the hamburger icon and it would work. If you clicked directly on the hamburger icon it would get the error.

I think this happened because it was getting the class of the hamburger icon (the span) and not the button classes. Hope that makes sense.