i {
  margin: 0;

  &.spaced {
    &-right {
      margin-right: 5px;
    }

    &-left {
      margin-left: 5px;
    }

    &-both {
      margin: 0 5px;
    }
  }

  &.centered {
    vertical-align: sub;
  }

  // Status

  &.hide {
    opacity: 0;
  }

  &.selected::before {
    color: $formulaire-grey-dark !important;
  }

  // Icons sizes

  &.xs-icon::before {
    font-size: 10px;
  }

  &.sm-icon::before {
    font-size: 16px;
  }

  &.md-icon::before {
    font-size: 20px;
  }

  &.lg-icon::before {
    font-size: 24px;
  }

  &.xl-icon::before {
    font-size: 40px;
  }

  &.hg-icon::before {
    font-size: 45px;
    @media screen and (max-width:$formulaire-screen-mobile){font-size:35px;}
    @media screen and (max-width:$formulaire-screen-tablet){font-size:40px;}
  }

  // Icons color

  &.dark-grey::before {
    color: $formulaire-grey-dark !important;
  }

  &.classic-grey::before {
    color: $formulaire-grey !important;
  }

  &.light-grey::before {
    color: $formulaire-grey-light !important;
  }

  &.very-light-grey::before {
    color: $formulaire-grey-very-light !important;
  }

  &.disabled {
    cursor: default;
    &::before {
      color: $formulaire-grey-light !important;
    }
  }

  // Icons content

  &.dropbtn::before{
    content: '\e912';
  }

  &.i-bell::before {
    font-family: 'material-icons';
    content: "\F09C";
  }

  &.i-cancel::before {
    font-family: 'material-icons';
    content: "\F156";
  }

  &.i-chevron-down::before {
    font-family: 'material-icons';
    content: "\F140";
  }

  &.i-chevron-left::before {
    font-family: 'material-icons';
    content: "\F141";
  }

  &.i-chevron-right::before {
    font-family: 'material-icons';
    content: "\F142";
  }

  &.i-chevron-up::before {
    font-family: 'material-icons';
    content: "\F143";
  }

  &.i-clock::before {
    font-family: 'material-icons';
    content: "\F150";
    color: $formulaire-grey-dark;
  }

  &.i-delete::before {
    font-family: 'material-icons';
    content: "\F1C0";
  }

  &.i-download::before {
    font-family: 'material-icons';
    content: "\F1DA";
    color: $formulaire-grey-dark;
  }

  &.i-drag::before {
    font-family: 'material-icons';
    content: "\F1D8";
    color: $formulaire-grey;
  }

  &.i-duplicate::before {
    font-family: 'material-icons';
    content: "\F18F";
  }

  &.i-validate::before {
    font-family: 'material-icons';
    content: "\F12C";
  }

  &.i-plus-circle::before {
    font-family: 'material-icons';
    content: "\F417";
  }

  &.i-send::before {
    font-family: 'material-icons';
    content: "\F0108";
    color: $formulaire-grey-dark;
  }

  &.i-share::before {
    font-family: 'material-icons';
    content: "\F497";
    color: $formulaire-grey-dark;
  }

  &.i-view-cards::before {
    font-family: 'material-icons';
    content: "\FE4D";
    color: $formulaire-grey-light;
  }

  &.i-view-tab::before {
    font-family: 'material-icons';
    content: "\F572";
    color: $formulaire-grey-light;
  }

  &.i-undo::before {
    font-family: 'material-icons';
    content: "\F54C";
  }

  &.i-folder::before {
    font-family: 'material-icons';
    content: "\F24B";
    color: $formulaire-blue;
  }

  &.i-eye::before {
    font-family: 'material-icons';
    content: "\F208";
    color: $formulaire-blue;
  }

  &.i-eye:hover::before {
    font-family: 'material-icons';
    content: "\F208";
    color: $formulaire-orange;
  }

  &.i-info::before {
    font-family: 'material-icons';
    content: "\F2FD";
    color: $formulaire-blue;
  }

  &.i-edit::before {
    font-family: 'material-icons';
    content: "\F3EB";
  }
}