.icon {
    display: inline-block;
    width: auto;
    height: auto;
    direction: ltr;
    font-family: var(--ff-icons);
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: inherit;
    text-rendering: optimizelegibility;
    text-transform: none;
    vertical-align: bottom;
    white-space: nowrap;
    word-wrap: normal;
  }
  
  .has-icon::before {
    display: inline-block;
    width: auto;
    height: auto;
    direction: ltr;
    font-family: var(--ff-icons);
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: inherit;
    text-rendering: optimizelegibility;
    text-transform: none;
    vertical-align: bottom;
    white-space: nowrap;
    word-wrap: normal;
  }
  
  .icon-s {
    font-size: var(--s);
    line-height: var(--s);
  }
  
  .icon-m {
    font-size: var(--m);
    line-height: var(--m);
  }
  
  .icon-l {
    font-size: var(--l);
    line-height: var(--l);
  }
  
  .icon-xl {
    font-size: var(--xl);
    line-height: var(--xl);
  }
  
  .icon.md-dark { color: var(--lightest); }
  .icon.md-light { color: var(--darkest); }
  
  .icon-inline {
    margin-right: var(--xs);
    font-size: var(--m);
  }
  
  .icon::before {
    content: attr(data-icon);
  }