navbar-toggler-icon is not visible in Bootstrap 4

Question

Nav bar toggle icon is not showing up(a simple rectangle is showing up in place toggle button), PFB is my code.

I am using Bootstrap 4

Someone please help me what I am missing in below code?

Adding Image to understand the issue

<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--change-appearance" data-header-fix-moment="500" data-header-fix-effect="slide">
    <div class="u-header__section u-header__section--dark g-bg-black g-transition-0_3 g-py-10" data-header-fix-moment-exclude="g-bg-black g-py-10" data-header-fix-moment-classes="g-bg-black-opacity-0_7 u-shadow-v18 g-py-0">
        <a class="sr-only sr-only-focusable skip-navigation" id="skip-navigation " href="#dbCarousel">Skip to main content</a>
        <nav class="navbar navbar-expand-xl navbar-dark container col-sm-12">
            <div class="container col-sm-12 margin-left-right-1Percent" style="margin:auto;width:100%; max-width:100%">
                <!-- Responsive Toggle Button -->
                
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBar"
                        aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- End Responsive Toggle Button -->
                <!-- Navigation -->
                <div id="navBar" class="header-container-custom collapse navbar-collapse flex-sm-row g-pt-10 g-pt-5--lg" style="text-align:left;">

                    <ul class="navbar-nav g-font-weight-500" style="text-align:left; width:100%">
                        <li class="nav-item g-mx-15--lg g-my-1--lg hidden-xs" style="text-align:center;margin-left: 0px !important">
                            <a href="\" style="margin-top:40px;text-align:center">
                                <img src="/Images/logo256px.png" width="200" class="hidden-xs" alt="Logo" />
                            </a>
                        </li>
                        <li class="nav-item g-ml-0--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h1><a href='someurl' class="nav-link2-padding nav-link2-font">Community</a></h1>
                        </li>
                        <li class="nav-item g-mx-15--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h1><a href='someurl/spaces/111/index.html' class="nav-link2-padding nav-link2-font">Awareness</a></h1>
                        </li>
                        <li class="nav-item g-mx-15--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h1><a href='someurl/training.html' class="nav-link2-padding nav-link2-font">Training</a></h1>
                        </li>
                        <li class="nav-item g-mr-10--lg g-my-1--lg nav-link2" style="text-align:left;padding-top:10px">
                            <h2><a href='someurl/spaces/23/index.html' class="nav-link2-padding nav-link2-font">Documentation</a></h2>
                        </li>
                    </ul>
                    <ul class="navbar-nav navbar-right g-font-weight-500 ulNotification">
                        <li class="dropdown" style="width:65px;">
                            <a href="#" class="dropdown-toggle notficationIcons belliconLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                                <i class="fa fa-bell fa-lg" aria-hidden="true" style="width:30px; height:30px;"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li>
                                    <div id="dvNotifications" style="background-color:#0e0e0e;width:300px">
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown" style="width:65px;">
                            <a href="#" class="dropdown-toggle notficationIcons usericonLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
                                <img src="@Convert.ToString(Session[" UserProfilePhoto"])" alt="User Profile" class="image-profile" />
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li>
                                    <div id="dvLoginUserDetails">
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- End Navigation -->
            </div>
        </nav>
    </div>
</header>

Answer 1

Below CSS fixed the issue.

Same Image is getting loaded from bootstrap also but some how it is not rendering on UI. Explicit add of below line is rendering the image.

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}