ion-icon {
    display: inline-block;
    font-size: inherit;
  }
  
  ion-icon .icon-inner {
    height: 1em;
    width: 1em;
  }
  
  ion-icon svg {
    fill: currentColor;
    stroke: currentColor;
  }
  
  .icon-small .icon-inner {
    font-size: 18px;
  }
  
  .icon-large .icon-inner {
    font-size: 32px;
  }
  
  /* Set iOS Icon Colors */
  /* ------------------- */
  
  .icon-ios-primary svg {
    fill: var(--ion-color-ios-primary, var(--ion-color-primary, #3880ff));
    stroke: var(--ion-color-ios-primary, var(--ion-color-primary, #3880ff));
  }
  
  .icon-ios-secondary svg {
    fill: var(--ion-color-ios-secondary, var(--ion-color-secondary, #0cd1e8));
    stroke: var(--ion-color-ios-secondary, var(--ion-color-secondary, #0cd1e8));
  }
  
  .icon-ios-tertiary svg {
    fill: var(--ion-color-ios-tertiary, var(--ion-color-tertiary, #f4a942));
    stroke: var(--ion-color-ios-tertiary, var(--ion-color-tertiary, #f4a942));
  }
  
  .icon-ios-success svg {
    fill: var(--ion-color-ios-success, var(--ion-color-success, #10dc60));
    stroke: var(--ion-color-ios-success, var(--ion-color-success, #10dc60));
  }
  
  .icon-ios-warning svg {
    fill: var(--ion-color-ios-warning, var(--ion-color-warning, #ffce00));
    stroke: var(--ion-color-ios-warning, var(--ion-color-warning, #ffce00));
  }
  
  .icon-ios-danger svg {
    fill: var(--ion-color-ios-danger, var(--ion-color-danger, #f14141));
    stroke: var(--ion-color-ios-danger, var(--ion-color-danger, #f14141));
  }
  
  .icon-ios-light svg {
    fill: var(--ion-color-ios-light, var(--ion-color-light, #f4f5f8));
    stroke: var(--ion-color-ios-light, var(--ion-color-light, #f4f5f8));
  }
  
  .icon-ios-medium svg {
    fill: var(--ion-color-ios-medium, var(--ion-color-medium, #989aa2));
    stroke: var(--ion-color-ios-medium, var(--ion-color-medium, #989aa2));
  }
  
  .icon-ios-dark svg {
    fill: var(--ion-color-ios-dark, var(--ion-color-dark, #222428));
    stroke: var(--ion-color-ios-dark, var(--ion-color-dark, #222428));
  }
  
  
  /* Set Material Design Icon Colors */
  /* ------------------------------- */
  
  .icon-md-primary svg {
    fill: var(--ion-color-md-primary, var(--ion-color-primary, #3880ff));
    stroke: var(--ion-color-md-primary, var(--ion-color-primary, #3880ff));
  }
  
  .icon-md-secondary svg {
    fill: var(--ion-color-md-secondary, var(--ion-color-secondary, #0cd1e8));
    stroke: var(--ion-color-md-secondary, var(--ion-color-secondary, #0cd1e8));
  }
  
  .icon-md-tertiary svg {
    fill: var(--ion-color-md-tertiary, var(--ion-color-tertiary, #f4a942));
    stroke: var(--ion-color-md-tertiary, var(--ion-color-tertiary, #f4a942));
  }
  
  .icon-md-success svg {
    fill: var(--ion-color-md-success, var(--ion-color-success, #10dc60));
    stroke: var(--ion-color-md-success, var(--ion-color-success, #10dc60));
  }
  
  .icon-md-warning svg {
    fill: var(--ion-color-md-warning, var(--ion-color-warning, #ffce00));
    stroke: var(--ion-color-md-warning, var(--ion-color-warning, #ffce00));
  }
  
  .icon-md-danger svg {
    fill: var(--ion-color-md-danger, var(--ion-color-danger, #f14141));
    stroke: var(--ion-color-md-danger, var(--ion-color-danger, #f14141));
  }
  
  .icon-md-light svg {
    fill: var(--ion-color-md-light, var(--ion-color-light, #f4f5f8));
    stroke: var(--ion-color-md-light, var(--ion-color-light, #f4f5f8));
  }
  
  .icon-md-medium svg {
    fill: var(--ion-color-md-medium, var(--ion-color-medium, #989aa2));
    stroke: var(--ion-color-md-medium, var(--ion-color-medium, #989aa2));
  }
  
  .icon-md-dark svg {
    fill: var(--ion-color-md-dark, var(--ion-color-dark, #222428));
    stroke: var(--ion-color-md-dark, var(--ion-color-dark, #222428));
  }