.material-symbols-outlined {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Material Symbols Outlined;
}

.material-symbols-outlined.x-large {
  font-size: var(--lab-ds-semantic-size-icon-xxl);
  width: var(--lab-ds-semantic-size-icon-xxl);
  height: var(--lab-ds-semantic-size-icon-xxl);
}

.material-symbols-outlined.large {
  font-size: var(--lab-ds-semantic-size-icon-l);
  width: var(--lab-ds-semantic-size-icon-l);
  height: var(--lab-ds-semantic-size-icon-l);
}

.material-symbols-outlined.medium {
  font-size: var(--lab-ds-semantic-size-icon-m);
  width: var(--lab-ds-semantic-size-icon-m);
  height: var(--lab-ds-semantic-size-icon-m);
}

.material-symbols-outlined.s-medium {
  font-size: var(--lab-ds-semantic-size-icon-sm);
  width: var(--lab-ds-semantic-size-icon-sm);
  height: var(--lab-ds-semantic-size-icon-sm);
}

.material-symbols-outlined.small {
  font-size: var(--lab-ds-semantic-size-icon-s);
  width: var(--lab-ds-semantic-size-icon-s);
  height: var(--lab-ds-semantic-size-icon-s);
}

.material-symbols-outlined.x-small {
  font-size: var(--lab-ds-semantic-size-icon-xs);
  width: var(--lab-ds-semantic-size-icon-xs);
  height: var(--lab-ds-semantic-size-icon-xs);
}

.material-symbols-outlined.xx-small {
  font-size: var(--lab-ds-semantic-size-icon-xxs);
  width: var(--lab-ds-semantic-size-icon-xxs);
  height: var(--lab-ds-semantic-size-icon-xxs);
}