Open In App
Related Articles

How to display icon next to show/hide text on button ?

Improve Article
Save Article
Like Article

In this article, we will learn how to add icons with the show/hide text button and also you can use that icon as a button. It will be done here by using JavaScript. In this example, with the help of JavaScript, you can easily toggle between show and hide. Add any icons beside the button or you can use icons as a button also. Here you just need to link with the awesome font’s icons that will bring the icons to your webpage. In this example clicking the text beside the fire icon trigger the show/hide function. 

Required things: A <div> that will show and hide your element as you set, a text that will work as a button, and the JavaScript to do the job. The below code will illustrate the approach more clearly. 

Example: (No space is going to be taken up by the element when the property of the display is set to “none.”) 


<!DOCTYPE html>
<html lang="en">
        How to display icon next to
        show/hide text on button?
    <link rel="stylesheet" href=
    <div onclick="showme('widget');" id="geeks">
        <h1 style="color:green">
        <i class="fa fa-fire"></i>
    <div id="widget" style="display:none;">
            GeeksforGeeks: A Online Computer
            Science Portal for Geeks
        function showme(id) {
            let gfg = document.getElementById(id);
            let GFG = document.getElementById("geeks");
            if ( == 'block') {
       = 'none';
                GFG.innerHTML =
                    'GFG <i class="fa fa-fire"></i>';
            } else {
       = 'block';
                GFG.innerHTML =
                    'Tag-line <i class="fa fa-fire"></i>';


How to display icon next to show/hide text on button?

How to display icon next to show/hide text on button?

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 20 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials