How to add a FluentIcon to a FluentToolbar from a child page?

[pmeems]

Using Blazor8 and Fluent-UI v4.9.3

I have added a toolbar to my MainLayout containing two buttons (FluentIcon) which I want on every page.
This works fine.

Some of my pages have an information button. When clicked a popup is shown with some information about the page.
Adding this button to my page and opening the popup works fine as well.

Now I want to visually have my info button as the third button in the toolbar, without using CSS with position: absolute, etc.

Something like FluentToolbar.AddItem(FluentIcon).
Of course I tried, but this method doesn't exist.

What would be a good solution to archive this?

This is the code I use in my Weather page:

<FluentIcon Id="info" Class="toolbarButton" Slot="end" Value="@(new Icons.Regular.Size24.Info())" OnClick="OpenDocsDialog" />
<Modal @bind-IsOpen="IsDocsDialogOpen" Title="Documentatie Weather">
    <DocsWeather />
</Modal>

And my code behind:

    private bool IsDocsDialogOpen { get; set; }
    private void OpenDocsDialog()
    {
        IsDocsDialogOpen = true;
        StateHasChanged();
    }

When I click on this info button the popup is shown with my page-specific content.

All I want now is to put this icon button visually in the toolbar.

[dvoituron]

You should probably use a condition based on a boolean variable isInfoDisplayed like this in your razor page.
This button will be included only if this variable is true.

@if (isInfoDisplayed == true)
{
    <FluentButton ...>Info</FLuentButton>
}

[pmeems]

Thanks for the quick reply.

I tried that, but then my click-event doesn't work. Because it needs to fill the popup with page-specific content.

<Modal @bind-IsOpen="IsDocsDialogOpen" Title="Documentation Weather">
    <DocsWeather />
</Modal>

[pmeems]

I've update my start post with extra info.