Can't apply icon `size` when its inside a button

Icon sizes do not get applied when they live inside a button. html

 <button class="btn waves-effect">
      <i class="tiny material-icons">edit</i> Edit Dashboard
</button>

css from materialize

// from buttons.scss
.btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
    font-size: 1.3rem; // <----- this overrides the i.tiny below
    line-height: inherit;
}

// from global.scss
i.tiny {
    font-size: 1rem; // <-- doesn't get applied
}

Proposed Solution

remove font-size: 1.3rem;. It is not needed since the default font size is already specified in

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; <--- this becomes the default
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

Either that, or set it to font-size: inherit to take the base rem size.

Dogfalo / materialize

Can't apply icon `size` when its inside a button #5487

Proposed Solution