Cannot create icon for custom button

[ken-salterdiazsolutions]

Trying to create a custom button:

import svgIcon from "../assets/email.svg"

const emailButtonConfig = {
        text: "Log in with Email",
        icon: createSvgIcon(svgIcon),
        iconFormat: name => `fa fa-${name}`,
        style: { background: "darkgray" },
        activeStyle: { background: "gray" }
    };

    const EmailLoginButton = createButton(emailButtonConfig);

This creates a button with no icon. The HTML generated for the icon is:

<button type="button" style="display: block; border: 0px; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; color: rgb(255, 255, 255); cursor: pointer; font-size: 19px; margin: 5px; width: calc(100% - 10px); overflow: hidden; padding: 0px 10px; user-select: none; height: 50px; background: darkgray;">
<div style="align-items: center; display: flex; height: 100%;">
<div style="display: flex; justify-content: center; min-width: 26px;"></div>
<div style="width: 10px;"></div>
<div style="text-align: left; width: 100%;">Log in with Email</div>
</div>
</button>

The div where the icon would be has no inner HTML. What am I doing wrong? I have tried putting the contents of "email.svg" into a string and passing that to createSvgIcon but that doesn't work either.

[nguyenviet3057]

I used custom button without importing any svg icon by including the cdn of fontawesome v4 in the head tag of the index.html file