CODEWITHSUNDEEP
htmlcsssassangular-material
1252748
1252748

Reputation: 15372

How to correct mat-icon preventing `text-transform` on sibling element

I have a button that includes a mat-icon. It conditionally renders with an is-text class, and if that's present, I override the text-transform property for the button from uppercase to capitalize. However the capitalize property does not apply (in my opinion) correctly. That is, in the example below I should have:

Filter/Sort

where in fact what is rendered is:

filter/Sort

Markup:

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

SCSS:

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

If the mat-icon is removed, the capitalization renders correctly, but I don't want to do that.

What is the correct way to apply the capitalize property to only the .span element?

Stackblitz Example

Upvotes: 1

Views: 259

Answers (1)

Typhoid Barry
Typhoid Barry

Reputation: 36

Adding display: inline-block to the span fixes the problem.

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

Upvotes: 2

Related Questions