Фон значка внутри контейнера в начальной загрузке ⇐ CSS

[Anonymous]

У меня есть пример того, чего я хочу достичь.

Как видите, внутри таблетки на правом сайте есть небольшой значок обновления, который имеет свой собственный цвет и цвет фона. Я пытался получить что-то подобное с помощью начальной загрузки, но я просто не могу установить правильный размер фона, не делая сам элемент значка слишком большим для контейнера.
Это самый близкий вариант. В настоящее время у меня есть, но это выглядит не так хорошо, как на картинке-примере. Можно ли это исправить с помощью лучшего CSS или эти значки просто не подходят для этой цели?

Код: Выделить всё

.buttonContainer {
font-size: large;
}

.badge {
font-weight: 500 !important;
border-color: #adb5bd !important;
}

.icon {
display: inline-block;
border-radius: var(--bs-border-radius-pill) !important;
background-color: lightgray;
color: var(--bs-secondary);
}

.toBig {
padding: 5px;
}

Код: Выделить всё

Background to small
Test test test [/i]

Test test test [i][/i]

Background ok but icon itself to big
Test test test [i][/i]

Test test test [i][/i]

Подробнее здесь: https://stackoverflow.com/questions/793 ... -bootstrap