How to Add Icon in Placeholder in Html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Input Field</title>
    <style>
        .input-container {
            position: relative;
            margin-top: 20px;
        }

.input-container input {
            border: 1px solid #adadad;
            width: 300px;
            padding: 12px;
            border-radius: 4px;
            font-size: 16px;
            color: #525252;
            background-color: #ffff;
            padding-left: 26px;
            outline: none;
        }

.placeholder {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #7a7a7a;
            font-size: 17px;
            padding: 0px 5px;
            background-color: #ffff;
            pointer-events: none;
            transition: top 0.3s, font-size 0.3s;
        }

.dollar-sign {
            position: absolute;
            left: 14px;
            top: 50%;
            font-size: 17px;
            transform: translateY(-50%);
            color: #525252;
            margin-right: 8px;
            pointer-events: none;
            display: none;
        }

.input-container input:focus {
            border: 2px solid #525252;
        }

.input-container input:focus+.dollar-sign {
            display: inline-block;
        }

.input-container input:focus+.placeholder,
        .input-container input:not(:placeholder-shown)+.placeholder {
            top: 0;
            font-size: 14px;
            color: #525252;
        }
    </style>
</head>

<body>
    <div class="input-container">
        <input type="text" placeholder="">
        <span class="placeholder">Add Annual Pay</span>
        <span class="dollar-sign">$</span>
    </div>

inputField.addEventListener('blur', function () {
                const dollarSign = this.nextElementSibling.nextElementSibling;
                if (this.value === '') {
                    dollarSign.style.display = 'none';
                }
            });
        });
    </script>

</body>

</html>

 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Input Field</title>
    <style>
        .input-container {
            position: relative;
            margin-top: 20px;
        }
​
        .input-container input {
            border: 1px solid #adadad;
            width: 300px;
            padding: 12px;
            border-radius: 4px;
            font-size: 16px;
            color: #525252;
            background-color: #ffff;
            padding-left: 26px;
            outline: none;
        }
​
        .placeholder {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #7a7a7a;
            font-size: 17px;
            padding: 0px 5px;
            background-color: #ffff;
            pointer-events: none;
            transition: top 0.3s, font-size 0.3s;
        }
​
        .dollar-sign {
            position: absolute;
            left: 14px;
            top: 50%;
            font-size: 17px;
            transform: translateY(-50%);
            color: #525252;
            margin-right: 8px;
            pointer-events: none;
            display: none;
        }
​
        .input-container input:focus {
            border: 2px solid #525252;
        }
​
        .input-container input:focus+.dollar-sign {
            display: inline-block;
        }
​
        .input-container input:focus+.placeholder,
        .input-container input:not(:placeholder-shown)+.placeholder {
            top: 0;
            font-size: 14px;
            color: #525252;
        }
    </style>
</head>
​
<body>
    <div class="input-container">
        <input type="text" placeholder="">
        <span class="placeholder">Add Annual Pay</span>
        <span class="dollar-sign">$</span>
    </div>
​
    <script>
        const inputFields = document.querySelectorAll('.input-container input');
        inputFields.forEach(inputField => {
            inputField.addEventListener('focus', function () {
                const dollarSign = this.nextElementSibling.nextElementSibling;
                dollarSign.style.display = 'inline-block';
            });
​
            inputField.addEventListener('blur', function () {
                const dollarSign = this.nextElementSibling.nextElementSibling;
                if (this.value === '') {
                    dollarSign.style.display = 'none';
                }
            });
        });
    </script>
​
</body>
​
</html>