_material-symbols.scss

$default-symbols-duration: 0.5s !default;

@keyframes symbols-pulse {
  0% {
    font-variation-settings: "wght" 100;
  }

  50% {
    font-variation-settings: "wght" 700;
  }

  100% {
    font-variation-settings: "wght" 100;
  }
}

@keyframes symbols-fill {
  0% {
    font-variation-settings: "FILL" 0;
  }

  100% {
    font-variation-settings: "FILL" 1;
  }
}

@keyframes symbols-empty {
  0% {
    font-variation-settings: "FILL" 1;
  }

  100% {
    font-variation-settings: "FILL" 0;
  }
}

.symbols-pulse i,
.symbols-pulse-hover:hover i,
.symbols-fill i,
.symbols-fill-hover:hover i,
.symbols-empty i,
.symbols-empty-hover:hover i {
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-duration: var(--duration, $default-symbols-duration);
}

.symbols-pulse i,
.symbols-pulse-hover:hover i {
  --duration: #{$default-symbols-duration * 3};
  animation-name: symbols-pulse;
  animation-iteration-count: infinite;
}

.symbols-fill i,
.symbols-fill-hover:hover i {
  animation-name: symbols-fill;
  animation-fill-mode: forwards;
}

.symbols-empty i,
.symbols-empty-hover:hover i {
  animation-name: symbols-empty;
  animation-fill-mode: forwards;
}

.material-symbols-rounded,
.material-symbols-outlined,
.material-symbols-sharp {
  font-variation-settings: "FILL" var(--fill, 0), "wght" var(--weight, 400), "GRAD" var(--grad, 0), "OPSZ" var(--opsz, 24);
}

.dark {
  --grad: -25;
  background: black;
  color: rgba(255, 255, 255, 1);

  &[disabled],
  &.disabled {
    color: rgba(255, 255, 255, 0.3);
  }
}