After receiving feedback from Kurt, I was able to find a solution to my issue with the icons. Instead of using standard icons, I switched to icons from a linked library called Blazorise.Icons.FontAwesome. You can find more information about this library here: .

To implement this change, I modified a navigation point in the code for NavMenu.razor:

<NavLink class="nav-link" href="counter">
    <Icon Name="IconName.Add" IconSize="IconSize.Large" />  @* new *@
    <span style="margin-right:0.8em;"></span> Counter  @* new *@
    @*<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter *@   @* old *@
</NavLink>

All available icons can be found in the documentation provided.

While I may not know how to use certain standard icons like the ones included in the template, by utilizing an alternative library, I am able to access a wider range of icons as needed.

If you're interested in learning how to customize Blazor's NavMenu, I detailed the process here.

1. First step is to select a desired icon from Bootstrap Icon library
2. Next, copy the SVG code of the chosen icon to your clipboard
3. Then proceed to URL encode the copied SVG code
4. Find an existing style like .bi-list-nested-nav-menu in NavMenu.razor.css and duplicate it with a new name
5. Finally, insert the URL-encoded SVG code after "data:image/svg+xml," within your newly created style

After perusing through MATT'S WORK BLOG (mentioned below), I devised a PowerShell script to accomplish this task efficiently. The script generates an output that can seamlessly fit into a Blazor 8 project. Just specify the Bootstrap icon name (as identified in the [Bootstrap Icon Link][1])

The generated output will be ready for implementation.

Insert the following Generated CSS snippet into your NavMenu.razor.css:

.bi-1-circle-nav-menu {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-1-circle' viewBox='0 0 16 16'%3E  %3Cpath d='M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z'/%3E%3C/svg%3E");

}

Embed the following HTML code within your NavMenu.razor:

<div class="nav-item px-3">
<NavLink class="nav-link" href="authorform">
    <span class="bi-1-circle-nav-menu" aria-hidden="true"></span> Dashboard
</NavLink>

function Add-BlazorNavMenuIconFromUrl {
    param(
        # The name of the Bootstrap icon
        [Parameter(Mandatory = $true)]
        [string]$IconName,  
        # SVG file on GitHub
        [Parameter(Mandatory = $false)]
        [string]$MenuItem = "BlazorPageHere",  
        # URL to the SVG file on GitHub or elsewhere
        [Parameter(Mandatory = $false)]
        [string]$BlazorPage = "BlazorPageHere"  

    )

    try {
        # Construct the URL to the SVG file on GitHub
        $Url = "https://raw.githubusercontent.com/twbs/icons/main/icons/$IconName.svg"

        # Download the SVG file content directly
        $response = Invoke-WebRequest -Uri $Url
        $BootstrapSvgHtml = $response.Content

        # Process the SVG HTML
        $encodedSvgHtml = $BootstrapSvgHtml -replace 'currentColor', 'white' `
            -replace '"', "'" `
            -replace '<', '%3C' `
            -replace '>', '%3E' `
            -replace "\r?\n", "" 

        # Extract the SVG name from the URL for class naming
        $svgName = [System.IO.Path]::GetFileNameWithoutExtension($Url)
        $IconClassName = "bi-$($svgName)-nav-menu"

        # Create the CSS rule using StringBuilder
        $cssBuilder = New-Object System.Text.StringBuilder
        [void]$cssBuilder.AppendLine(".$IconClassName {")
        [void]$cssBuilder.AppendLine("`tbackground-image: url(`"data:image/svg+xml,$encodedSvgHtml`");")
        [void]$cssBuilder.AppendLine("}")

        $newCssRule = $cssBuilder.ToString()

        Write-Host "Add the following Generated CSS to your NavMenu.razor.css:" -ForegroundColor Yellow
        Write-Host $newCssRule -ForegroundColor Cyan

        $htmlBuilder = New-Object System.Text.StringBuilder
        [void]$htmlBuilder.AppendLine('<div class="nav-item px-3">')
        [void]$htmlBuilder.AppendLine('    <NavLink class="nav-link" href="' + $BlazorPage + '">')
        [void]$htmlBuilder.AppendLine("        <span class=`"bi $IconClassName`" aria-hidden=`"true`"></span> $MenuItem")
        [void]$htmlBuilder.AppendLine('    </NavLink>')
        [void]$htmlBuilder.AppendLine('</div>')

        $htmlMarkup = $htmlBuilder.ToString()
        
        Write-Host "Add the following HTML to your NavMenu.razor:" -ForegroundColor Yellow
        Write-Host $htmlMarkup -ForegroundColor Green

        $clipboardBuilder = New-Object System.Text.StringBuilder
        [void]$clipboardBuilder.AppendLine($htmlMarkup)
        [void]$clipboardBuilder.AppendLine()
        [void]$clipboardBuilder.AppendLine()
        [void]$clipboardBuilder.AppendLine($newCssRule)

        Set-Clipboard -Value $clipboardBuilder.ToString()
    } catch {
        Write-Error "An error occurred: $_"
    } 
}
# Run the function with command line arguments
if ($args.Count -ne 3) {
    $ScriptName = ($MyInvocation.MyCommand.Name).Replace(".ps1","")
    Write-Host "Usage: $ScriptName <IconName> <MenuItem> <BlazorPage>"
    exit
}
Add-BlazorNavMenuIconFromUrl `
    -IconName $args[0] `
    -MenuItem $args[1] `
    -BlazorPage $args[2]

# Example usage:

    Add-BlazorNavMenuIconFromUrl -IconName "1-circle" -BlazorPage "/dashboard" -MenuItem="User Dashboard"

  [1]: https://icons.getbootstrap.com/