How to fit the font-awesome icon with text in the nicegui mermaid graph nodes

I am trying to create a mermaid graph in nicegui. I am able to fit the icon and text in the graph node. But in browser only the icon is showing up. I know it is because of the width of the node's label. How to fix it?

from nicegui import ui

@ui.page('/')
def index_page() -> None:
    def fa_setup():
        ui.run_javascript("""
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
            document.head.appendChild(link);
        """)
    fa_setup()

    class State:
        def __init__(self):
            self.graph = """
                graph LR;
                A1["fa:fa-credit-card A1"];
                A2["fa:fa-server A2"];
                A1 -- |4ms| --> A2;
            """

    state = State()

    diag = ui.mermaid(content=state.graph, config={'securityLevel': 'loose', 'theme': 'classic'})
    diag.bind_content(state, 'graph')

ui.run()

Solution

It might not answer your question, but this NiceGUI code

ui.add_head_html('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">')
ui.mermaid('''
    graph LR;
    A1["fa:fa-credit-card A1"];
    A2["fa:fa-server A2"];
    A1 -- |4ms| --> A2;
''')

behaves exactly like this plain Mermaid example:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
      mermaid.initialize({ startOnLoad: true });
    </script>
  </head>
  <body>
    <div class="mermaid">graph LR; A1["fa:fa-credit-card A1"]; A2["fa:fa-server A2"]; A1 -- |4ms| --> A2;</div>
  </body>
</html>

So apparently the problem is somewhere in how Mermaid renders nodes with icons.