@innovaccer/design-system/css/src/components/icon.module.css

React components library project for Innovaccer Design System

/* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, 
 * we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px. 
 * https://google.github.io/material-design-icons/
 */

/* Rules for sizing the icon. */

/* .material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; } */

/* Rules for using icons as black on a light background. */

/* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */

/* Rules for using icons as white on a dark background. */

/* .material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */
.Icon {
  flex-shrink: 0;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

.Icon--subtle {
  color: var(--text-subtle);
}

.Icon--disabled {
  color: var(--text-disabled);
}

.Icon--destructive {
  color: var(--text-destructive);
}

.Icon--white {
  color: var(--text-white);
}

.Icon--default {
  color: var(--text);
}

.Icon--info {
  color: var(--primary);
}

.Icon--success {
  color: var(--success);
}

.Icon--warning {
  color: var(--warning);
}

.Icon--alert {
  color: var(--alert);
}

.Icon--primary {
  color: var(--primary);
}

.Icon--primaryLighter {
  color: var(--primary-lighter);
}

.Icon--primaryDark {
  color: var(--primary-dark);
}

.Icon--primaryDarker {
  color: var(--primary-darker);
}

.Icon--alertLighter {
  color: var(--alert-lighter);
}

.Icon--alertDark {
  color: var(--alert-dark);
}

.Icon--alertDarker {
  color: var(--alert-darker);
}

.Icon--successLighter {
  color: var(--success-lighter);
}

.Icon--successDark {
  color: var(--success-dark);
}

.Icon--successDarker {
  color: var(--success-darker);
}

.Icon--warningLighter {
  color: var(--warning-lighter);
}

.Icon--warningDark {
  color: var(--warning-dark);
}

.Icon--warningDarker {
  color: var(--warning-darker);
}

.Icon--accent1 {
  color: var(--accent1);
}

.Icon--accent1Lighter {
  color: var(--accent1-lighter);
}

.Icon--accent1Dark {
  color: var(--accent1-dark);
}

.Icon--accent1Darker {
  color: var(--accent1-darker);
}

.Icon--accent2 {
  color: var(--accent2);
}

.Icon--accent2Lighter {
  color: var(--accent2-lighter);
}

.Icon--accent2Dark {
  color: var(--accent2-dark);
}

.Icon--accent2Darker {
  color: var(--accent2-darker);
}

.Icon--accent3 {
  color: var(--accent3);
}

.Icon--accent3Lighter {
  color: var(--accent3-lighter);
}

.Icon--accent3Dark {
  color: var(--accent3-dark);
}

.Icon--accent3Darker {
  color: var(--accent3-darker);
}

.Icon--accent4 {
  color: var(--accent4);
}

.Icon--accent4Lighter {
  color: var(--accent4-lighter);
}

.Icon--accent4Dark {
  color: var(--accent4-dark);
}

.Icon--accent4Darker {
  color: var(--accent4-darker);
}

.Icon--inverse {
  color: var(--inverse);
}