:host {
  display: inline-block;
  width: 1em;
  height: 1em;
  contain: strict;
  fill: currentColor;
  box-sizing: content-box !important;
  font-size: 24px !important;
}

:host .ionicon {
  stroke: currentColor;
}

.ionicon-fill-none {
  fill: none;
}

.ionicon-stroke-width {
  stroke-width: 32px;
  stroke-width: var(--ionicon-stroke-width, 32px);
}

.icon-inner,
.ionicon,
svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* Icon Sizes
 * -----------------------------------------------------------
 */
:host(.small) {
  font-size: 18px !important;
}

:host(.large) {
  font-size: 28px !important;
}

/* Icon Types
 * -----------------------------------------------------------
 */
:host(.default) {
  fill: var(--color-icon-default);
}

:host(.muted) {
  fill: var(--color-icon-muted);
}

:host(.subtle) {
  fill: var(--color-icon-subtle);
}

:host(.primary) {
  fill: var(--color-icon-primary);
}

:host(.success) {
  fill: var(--color-icon-success);
}

:host(.danger) {
  fill: var(--color-icon-danger);
}

:host(.warning) {
  fill: var(--color-icon-warning);
}

:host(.armed) {
  fill: var(--color-icon-armed);
}

:host(.disarmed) {
  fill: var(--color-icon-disarmed);
}

:host(.partially-armed) {
  fill: var(--color-icon-partially-armed);
}

:host(.alarm) {
  fill: var(--color-icon-alarm);
}

:host(.playback) {
  fill: var(--color-icon-playback);
}

:host(.restore) {
  fill: var(--color-icon-restore);
}

:host(.verification) {
  fill: var(--color-icon-verification);
}

:host(.relay) {
  fill: var(--color-icon-relay);
}

:host(.note) {
  fill: var(--color-icon-note);
}

:host(.ai) {
  fill: var(--color-icon-ai);
}