Q:

CSS check state - target svg in selected state

I am using a custom bootstrap 4 checkbox I have created with a SVG for a icon, I am trying to change the colour of the icon on the active state, I am struggling to try and target it and change it. My code so far is:

input[type="checkbox"]:checked+label {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  border: 1px solid $blue;
  color: $blue!important;
  font-weight: bold;
}

.select-option {
  height: 86px;
  width: 100%;
  border: 1px solid $light-grey;
  text-align: center;
  vertical-align: middle;
  font-family: $main-font;
  color: $grey;
  font-size: 14px;
  padding-top: 7px;
  border-radius: 3px;
}

.select-option:hover {
  border: 1px solid $blue;
}

.select-option:hover {
  color: $blue;
}

.select-option:hover path {
  fill: $blue;
}

.product-icon {
  width: 50px;
  height: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<input type="checkbox" name="warranty" class="sr-only" id="warranty">
<label for="warranty" class="select-option">
    <svg viewBox="0 0 60 40" class="product-icon">
        <path d="M21,2 C13.4580219,4.16027394 1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 41.321398,1.67860195 39,4 C36.1186011,6.8813989 3.11316157,27.1131616 5,29 C10.3223659,34.3223659 30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 17,34 C17,40.4724865 54,12.4064021 54,17 C54,23.7416728 34,27.2286213 34,37" id="Path-1" stroke-width="4" fill="none" stroke="orange" stroke-dasharray="270" stroke-dashoffset="-270"></path>
    </svg>
    <span class="product-label">Warranty</span>
</label>

A:

Use fill property on svg path.

input[type="checkbox"]:checked+label {
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.51);
  border: 1px solid $blue;
  color: $blue!important;
  font-weight: bold;
}

.select-option {
  height: 86px;
  width: 100%;
  border: 1px solid $light-grey;
  text-align: center;
  vertical-align: middle;
  font-family: $main-font;
  color: $grey;
  font-size: 14px;
  padding-top: 7px;
  border-radius: 3px;
}

.select-option:hover {
  border: 1px solid $blue;
}

.select-option:hover {
  color: $blue;
}

.select-option:hover path {
  fill: $blue;
}

.product-icon {
  width: 50px;
  height: auto;
}

input[type="checkbox"]:checked+label > svg > path{
  fill: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<input type="checkbox" name="warranty" class="sr-only" id="warranty">
<label for="warranty" class="select-option">
    <svg viewBox="0 0 60 40" class="product-icon">
        <path d="M21,2 C13.4580219,4.16027394 1.62349378,18.3117469 3,19 C9.03653312,22.0182666 25.2482171,10.3758914 30,8 C32.9363621,6.53181896 41.321398,1.67860195 39,4 C36.1186011,6.8813989 3.11316157,27.1131616 5,29 C10.3223659,34.3223659 30.6434647,19.7426141 35,18 C41.2281047,15.5087581 46.3445303,13.6554697 46,14 C42.8258073,17.1741927 36.9154967,19.650702 33,22 C30.3136243,23.6118254 17,31.162498 17,34 C17,40.4724865 54,12.4064021 54,17 C54,23.7416728 34,27.2286213 34,37" id="Path-1" stroke-width="4" fill="none" stroke="orange" stroke-dasharray="270" stroke-dashoffset="-270"></path>
    </svg>
    <span class="product-label">Warranty</span>
</label>

