Currently utilizing Angular 14 alongside Bootstrap 5. The code snippet below showcases a simple Bootstrap dropdown menu:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Within my index.html file, the following imports are present. Incorporating a Bootstrap theme requires these related imports.
<link rel="stylesheet" href="/assets/css/libs.bundle.css" />
<!-- Theme CSS -->
<link rel="stylesheet" href="/assets/css/theme.bundle.css" />
<!-- JAVASCRIPT -->
<!-- Vendor JS -->
<script src="/assets/js/vendor.bundle.js"></script>
<!-- Theme JS -->
<script src="/assets/js/theme.bundle.js"></script>
Encountering an issue where the dropdown menu icon is not displaying, and the cause remains unknown. While the dropdown functionality operates smoothly with the collapse, the icon appears as depicted below:
https://i.sstatic.net/G8MPF.png
Suspecting a possible connection with a class labeled .dropdown-toggle:after, which contains the following code. The font rendering may be the root of the issue.
.dropdown-toggle:after {
border: none!important;
content: "\e92e";
font-family: Feather;
height: auto;
line-height: 1;
vertical-align: middle;
width: auto;
}
Experimented with removing various CSS files from the index.html or introducing new fonts, but to no avail. Unclear if conflicting styles are causing interference with Bootstrap.