SVG come background centrato

[fermat]

ciao!

sto cercando di impostare un svg centrato come background.
in pratica devo modificare l'accordion button di bootstrap 5.
ho fatto cosi:

.accordion-button::after {
  background-color: #52B377;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  text-align: center;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

il problema è che la freccia interna, l'svg quindi, non risulta centrato.
ne orizzontalmente ne verticalmente.

avete qualche suggerimento??

[KillerWorm]

Ciao, per centrare una immagine di background puoi applicare center center come valore della sotto-proprietà background-position,. Bisogna però capire meglio il contesto perché non mi è chiaro quale sia il tuo punto di partenza.
Col solo codice postato mi viene difficile riprodurre il problema. Se ti è possibile, ti chiedo di postare un link o un esempio minimo con cui si possa verificare direttamente lo scenario che descrivi.

[fermat]

risolto come dicevi tu:

.accordion-button::after {
  background-color: #52B377;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  text-align: center;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  background-position: center center;
}

ho giocato ore con l'svg senza pensare alla soluzione più semplice .
grazie per la dritta!

[KillerWorm]

Ottimo