<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;
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.