body:not(.icons-loaded) .material-symbols-rounded,
body:not(.icons-loaded) .material-icons-outlined,
body:not(.icons-loaded) .material-icons
 {
  position: relative;
  color: transparent;
  border-radius: 6px;
  /* To maintain the icon shimmer size */
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  line-height: 18px !important;
  /* To ensure the text behind the shimmer is hidden entierly */
  font-size: 0px !important;

  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--icons-loading-color);
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;    
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255),
      transparent
    );
    animation: skeleton-shimmer 1.2s infinite;
  }
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}