[GH-ISSUE #2] Link not opening when anchor contains SVG icon #2

Open
opened 2026-02-27 07:17:03 +03:00 by kerem · 1 comment
Owner

Originally created by @bmakan on GitHub (Mar 2, 2020).
Original GitHub issue: https://github.com/jonroig/MailtOWA/issues/2

The addon doesn't work on the links I use on one of my pages (on the intranet) which contain svg icons. I got the minimal example below:

<a href="mailto:example@google.com&amp;subject=Example" title="Create an empty email addressed to everyone in this section">
    <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path>
    </svg>
</a>

I stipped down all classes except this one:

.MuiSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
}

As soon as I replace the inner HTML with a text, it works.

Originally created by @bmakan on GitHub (Mar 2, 2020). Original GitHub issue: https://github.com/jonroig/MailtOWA/issues/2 The addon doesn't work on the links I use on one of my pages (on the intranet) which contain svg icons. I got the minimal example below: ```html <a href="mailto:example@google.com&amp;subject=Example" title="Create an empty email addressed to everyone in this section"> <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"> <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path> </svg> </a> ```` I stipped down all classes except this one: ```css .MuiSvgIcon-root { fill: currentColor; width: 1em; height: 1em; display: inline-block; font-size: 1.5rem; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; flex-shrink: 0; user-select: none; } ``` As soon as I replace the inner HTML with a text, it works.
Author
Owner

@jonroig commented on GitHub (Mar 19, 2020):

Weird! Ummm... wanna take a shot at fixing it? I'll accept a PR 😀
... otherwise, will take a look when I have a moment...

<!-- gh-comment-id:601282727 --> @jonroig commented on GitHub (Mar 19, 2020): Weird! Ummm... wanna take a shot at fixing it? I'll accept a PR 😀 ... otherwise, will take a look when I have a moment...
Sign in to join this conversation.
No labels
pull-request
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/MailtOWA-jonroig#2
No description provided.