:host {
  display: inline-block;
  width: var(--mdc-icon-size, 24px);
  height: var(--mdc-icon-size, 24px);

  --ha-icon-display: block;
}

ha-icon,
state-badge,
svg {
  display: block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

svg path {
  // !important is necessary to overcome the fill set on the path itself.
  fill: currentColor !important;
}

:host([allow-override-non-active-styles]) state-badge {
  --state-inactive-color: inherit;
}