Control the style of svg

Question

.search-bar svg {
  width: 25px;
  height: 25px;
  color: red;
}

.search-button svg {
  width: 25px;
  height: 25px;
  color: red;
}

<div class="search-bar">
  <form>
    <a class="search-button" type="submit">
      <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none"/>
                     <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                     <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                  </svg>
    </a>
  </form>
</div>

Can anyone tell me how to control the color of svg using CSS? I've tried doing this with different classes and IDs, but none of them seem to have an effect on the color. I am able to change the size and position but not the color. I'd like to be able to use a separate ID or class to do this, rather than changing the color of the circle and line separately.

<div class="search-bar">
  <form>
    <a class="search-button" type="submit">
      <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none"/>
                     <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                     <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                  </svg>
    </a>
  </form>
</div>

Answer 1

Assign shared properties (such as line and circle strokes) a value of currentColor, which you can then pass to the svg's color property (or any ancestor or inherited property) Control it:

.search-button svg {
  width: 25px;
  height: 25px;
  color: red;
}
 .search-button svg line,.search-button svg circle{
   stroke: currentColor;
}

<div class="search-bar">
  <form>
    <a class="search-button" type="submit">
      <svg class="svg-research" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                     <rect width="256" height="256" fill="none"/>
                     <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                     <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
                  </svg>
    </a>
  </form>
</div>

(This is what Font Awesome and other libraries do behind the scenes. If you give height and width values ​​in em units, you can also Control it through subsequent font-size, which is also inherited)