Как исправить значок mat, предотвращающий `text-transform` на элементе родственного элемента

Question

У меня есть кнопка, которая включает mat-icon. Он условно рендерится с классом is-text, и, если он присутствует, я переопределяю свойство text-transform для кнопки с uppercase на capitalize. Однако свойство capitalize не применяется (на мой взгляд) правильно. То есть в приведенном ниже примере у меня должно быть:

Filter / Sort

, где фактически отображается то, что:

filter / Сортировка

Разметка:

<button class="button is-text">
  <mat-icon>close</mat-icon>
  <label class="label">
    <span class="span">filter/sort</span>
  </label>
</button>

S CSS:

.button {
  text-transform: uppercase;
  &.is-text {
    .label .span{
      text-transform: capitalize;
    }
  }
}

Если удалить mat-icon, заглавная буква отображается правильно, но Я не хочу этого делать.

Как правильно применить свойство capitalize только к элементу .span?

Stackblitz Пример

Answer 1

Добавление display: inline-block к промежутку устраняет проблему.

.button {
  text-transform: uppercase;
  &.is-text {
    .label .span{
      text-transform: capitalize;
      display: inline-block;
    }
  }
}