How to manage svg styles?

Question

css

There are sprites from symbol

<symbol  viewBox="0 0 29 20" id="arrow_right" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 10L27.6667 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 1L28 10L19 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>

then I use it with the given width and height

<svg width="24" height="24"> 
<use xlink:href="#arrow_right"></use>
<svg>

But the question arose how to paint over them with a different color

#arrow_right svg path {
stroke:red; 
}

Does not work. Tried not to set stroke in symbol , still doesn't see styles.