.icon-trend-up,
.icon-trend-down,
.icon-action {
  -webkit-mask-image: url("../img/trend-up.svg"); /* Use mask for the icon */
  mask-image: url("../img/trend-up.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  background-color: currentColor; /* Inherit font color */
}

.icon-trend-up {
  background-image: url("../img/trend-up.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: url("../img/trend-up.svg"); /* Use mask for the icon */
  mask-image: url("../img/trend-up.svg");
}

.icon-trend-down {
  background-image: url("../img/trend-down.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: url("../img/trend-down.svg");
  mask-image: url("../img/trend-down.svg");
}

.icon-action {
  background-image: url("../img/noun-action.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: url("../img/noun-action.svg");
  mask-image: url("../img/noun-action.svg");
}