[Python] 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()

Continue reading...