[data-icon] {
  display: inline-flex;
  flex: none;
  width: var(--icon-large);
  height: var(--icon-large);
  color: inherit;
}

[data-icon] svg {
  display: block;
  width: 100%;
  height: 100%;
}

[data-icon][data-icon-size="small"] {
  width: var(--icon-small);
  height: var(--icon-small);
}

[data-icon][data-icon-size="medium"] {
  width: var(--icon-medium);
  height: var(--icon-medium);
}

[data-icon][data-icon-size="xlarge"] {
  width: var(--icon-xlarge);
  height: var(--icon-xlarge);
}