Autosize

[yhojann-cl]

The icons are a static font size (24px), this causes problems with some frameworks like bootstrap 5 when integrating predefined sizing styles like display-1 which works with pixel points or rem and not pixels directly. There should be a setting or style sheet that overrides the size of icons to the document's default size, so each person could be free to use whatever size they want across different frameworks without resorting to manual declarations in style sheets overriding the values.

Please, remove font-size declarations from the css file or add a separated css without predefined size.

The fix for me adding new css rule in custom css file (ugly but useful):

.custom-material-icons-round {
    font-family: "Material Icons Round";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

Same as original but without font size and using new class name.

[marella]

You can just add font-size: inherit or font-size: revert to override this:

.material-icons {
  font-size: inherit;
}

The default font size of 24px is added to keep it compatible with the stylesheet from Google Fonts CDN.