How to replace dropdown-toggle icon with another default icon in Bootstrap ?

23 Feb, 2022
Bootstrap provides the option of adding a dropdown to our websites. The default icon on the dropdown button is the ‘downward solid arrow’ logo. Even though it serves its purpose, most of the modern-day websites nowadays use Bootstrap. Therefore, the icon might look very generic to the visitor.Program:  
html
<!DOCTYPE html><html> <head>    <title>Bootstrap dorpdown</title>    <meta name="viewport"          content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script>     <style>        .container{            margin:20px;        }        h2{            color:green;        }    </style></head> <body>    <div class="container">        <h2>GeeksforGeeks</h2>        <p>A Computer Science Portal for Geeks</p>        <div class="dropdown">            <button type="button"                    class="btn btn-success dropdown-toggle"                    data-toggle="dropdown">                Dropdown            </button>            <div class="dropdown-menu">                <a class="dropdown-item" href="#">Option A</a>                <a class="dropdown-item" href="#">Option B</a>                <a class="dropdown-item" href="#">Option C</a>                <a class="dropdown-item" href="#">Option D</a>            </div>        </div>    </div></body> </html>
Output:  
However, it is possible to change the default Bootstrap icon to the icon of your choice. You can also make that icon toggleable, below steps will proceed to the solution.  
Step 1: Go to an external icon website like Font Awesome. Embed its CDN link inside the <head> tag of the web-page.  
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
 
Step 2: Change the CSS of the dropdown-toggle to display:none. This will disappear the solid dropdown logo from the button. However, ‘!important’ must be added as well in order to see the changes on the webpage.  
.dropdown-toggle::after {
    display: none !important;
}
Step 3: After applying the CSS, copy the embed code of the icon that you want to display on the webpage from the external icon website and paste it inside the button tag. Like in this example, we are using the icon of ‘plus’ sign.
Step 4: The new icon will start getting displayed on the webpage.
Note: Below program code’s dropdown icon is also toggleable by adding a single line of jQuery code with one click function on the icon.Program: This example changing the default icon of Bootstrap dropdown icon.  
html
<!DOCTYPE html><html> <head>    <title>Bootstrap dorpdown</title>    <meta name="viewport"          content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script>    <style>        .container{            margin:20px;        }        h2{            color:green;        }        .dropdown-toggle::after {            display: none !important;        }        .fa {            margin:2px;            color:white;        }    </style></head><body>    <div class="container">        <h2>GeeksforGeeks</h2>        <p>A Computer Science Portal for Geeks</p>        <div class="dropdown">                         <!-- Dropdown button -->            <button type="button"                    class="btn btn-success dropdown-toggle"                                         data-toggle="dropdown">                Dropdown                <a href="javascript:void(0);"                   class="icon"                   onclick="geeksforgeeks()">                                         <!-- Changing the default icon with toggle-->                    <i onclick="myFunction(this)"                       class="fa fa-plus-circle"></i>                </a>            </button>                         <!-- Dropdown options -->            <div class="dropdown-menu">                <a class="dropdown-item" href="#">Option A</a>                <a class="dropdown-item" href="#">Option B</a>                <a class="dropdown-item" href="#">Option C</a>                <a class="dropdown-item" href="#">Option D</a>            </div>        </div>    </div>    <script>                 // Function to toggle the plus menu into minus        function myFunction(x) {            x.classList.toggle("fa-minus-circle");        }    </script></body> </html>
Output:  
 
varshagumber28
sumitgumber28
Bootstrap-Misc
Picked
Bootstrap
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to change Bootstrap datepicker with specific date format ?
Tailwind CSS vs Bootstrap
Create a Homepage for Restaurant using HTML , CSS and Bootstrap
How to make Bootstrap table with sticky table head?
How to insert spaces/tabs in text using HTML/CSS?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?