Change SVG stroke color in CSS [duplicate]

Question

For some reason setting color: #ffffff in CSS doesn't apply to my SVG.

How it looks with the code below

How I want it to look

Interestingly, it works if i replace currentColor with #ffffff in the SVG itself, but setting it in my CSS doesn't do anything. I also tried setting it inline in the HTML (style="color:#ffffff"), and setting stroke: #ffffff, but that didn't do anything either.

I'm out of ideas, so if anyone knows how to do this, and why setting it in css doesn't work, let me know.

Here's my code:

download.svg:

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

My img:

<button type='button' class='btn btn-primary' on:click={ExportXlsx}>
  Last ned
  <img class='test' alt='download' src='/images/download.svg' />
</button>

my css:

.test{
  color: #ffffff !important;
}

Answer 1

Approach #1

You'll need to specify a color for the stroke property:

stroke="rgb(255, 255, 255)"

---

Working Example:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  margin-left: 4px;
  transform: translateY(4px);
}

<button type="button">
Eksporter

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="rgb(255, 255, 255)" 
    stroke-width="2" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="feather feather-download"
  >
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

---

Approach #2

You can use CSS instead of SVG attributes.

---

Working Example:

button {
  height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 48px;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 63);
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
}

button svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  transform: translateY(4px);
  stroke-width: 2px; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.red svg {
  stroke: rgb(255, 0, 0);
}

button.yellow svg {
  stroke: rgb(255, 255, 0);
}

button.green svg {
  stroke: rgb(0, 255, 63);
}

<button type="button" class="red">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="yellow">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>

<button type="button" class="green">
Eksporter

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
</svg>

</button>