.material-icon {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

.material-icon.md-18 {
    font-size: 1.125rem;
}

.material-icon.md-24 {
    font-size: 1.5rem;
}

.material-icon.md-36 {
    font-size: 2.25rem;
}

.material-icon.md-48 {
    font-size: 3rem;
}

a.material-icon, button.material-icon, .material-icon.interactive {
    position: relative;
    padding: 0;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

a.material-icon.disabled, a.material-icon[disabled], a.material-icon:disabled,
button.material-icon.disabled, button.material-icon[disabled], button.material-icon:disabled,
.material-icon.interactive.disabled, .material-icon.interactive[disabled], .material-icon.interactive:disabled {
    color: rgba(var(--text-color), var(--opacity-hint));
    cursor: default;
}

a.material-icon::before, button.material-icon::before, .material-icon.interactive::before {
    content: '';
    display: inline-block;
    background-color: rgb(var(--text-color));
    opacity: 0;
    border-radius: 100%;
    position: absolute;
    z-index: 0;
    height: 1.5rem;
    width: 1.5rem;
    top: 50%;
    left: 50%;
    margin-top: -0.75rem;
    margin-left: -0.75rem;
    transition: all 0.2s;
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

a.material-icon:hover::before, button.material-icon:hover::before, .material-icon.interactive:hover::before {
    opacity: var(--opacity-hover);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

a.material-icon:active::before, button.material-icon:active::before, .material-icon.interactive:active::before {
    opacity: var(--opacity-pressed);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

a.material-icon:focus::before, button.material-icon:focus::before, .material-icon.interactive:focus::before {
    opacity: var(--opacity-focus);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

a.material-icon.dense:hover::before, button.material-icon.dense:hover::before, .material-icon.dense.interactive:hover::before {
    opacity: var(--opacity-hover);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

a.material-icon.dense:active::before, button.material-icon.dense:active::before, .material-icon.dense.interactive:active::before {
    opacity: var(--opacity-pressed);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

a.material-icon.dense:focus::before, button.material-icon.dense:focus::before, .material-icon.dense.interactive:focus::before {
    opacity: var(--opacity-focus);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

a.material-icon.disabled::before, a.material-icon[disabled]::before, a.material-icon:disabled::before,
button.material-icon.disabled::before, button.material-icon[disabled]::before, button.material-icon:disabled::before,
.material-icon.interactive.disabled::before, .material-icon.interactive[disabled]::before, .material-icon.interactive:disabled::before {
    display: none;
}