<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="icon-phone">
<path class="path1" d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</g>
</defs>
</svg>
<div>
Press
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-phone"></use>
</svg>
to make a call
</div>
<input type="text" min=6 max=6 value="#535355">
<button>Update</button>
div {
font-size: 1.8rem;
font-family: sans-serif;
color: #535355;
margin-bottom: 20px;
}
svg {
width: 2rem;
height: 2rem;
fill: currentColor;
vertical-align: bottom;
}
const button = document.querySelector('button');
const div = document.querySelector('div');
const input = document.querySelector('input');
button.addEventListener('click', () => {
div.style.color = input.value;
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.