Bootstrap 4 Simple Icon button

Below is some simple SCSS using bootstrap to create simple icon buttons like:

Simple add SCSS as follows:

a.btn-icon,
.btn-icon {
  position: relative;

  &.btn-outline-primary {
    &:before {
      background: $primary;
    }

    &:hover {
      &:before {
        background: rgba($primary, 0.7) !important
      }
    }
  }
  &.btn-outline-secondary {
    &:before {
      background: $secondary;

      &:hover {
        &:before {
          background: rgba($secondary, 0.7) !important
        }
      }
    }
  }
  padding: {
    right: calc(1.15rem + 60px);
  }

  &.btn-sm {
    padding: {
      right: calc(0.8rem + 60px);
    }
  }

  &.btn-lg {
    padding: {
      right: calc(1.5rem + 60px);
    }
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1;
    height: 100%;
    width: 60px;
  }

  &:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    color: $white;
    line-height: 1;
    height: 100%;
    width: 60px;
    text-align: center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('basket.svg');
  }
}

Now simple change the background image to whatever you require