Describe the bug

Hi, It's been 2 weeks I am using bootstrap vue for my project. It's very good. However, recently I came up with few issues.

Spacing Utilities:
In bootstrap-vue, we get some spacing utilities used in components like mx-1 or p-1. This is good for users but adding this to framework will break component styles if someone customizes bootstrap's spacer according to their needs. Below is some examples:

Toast

calendar

Icons:
As I have just started exploring bootstrap-vue I haven't explored all components and flexibility they provide. But I have an issue with changing icon of calendar component's action buttons. So, providing an option for using custom icons will be beneficial for everyone.

Steps to reproduce the bug

Change bootstrap spacer utility.
e.g.

$spacer: 1rem;
$spacers: ();
$spacers: map-merge(
  (
    0: 0,
    25: (
      $spacer * 0.25,
    ),
    50: (
      $spacer * 0.5,
    ),
    75: (
      $spacer * 0.75,
    ),
    1: (
      $spacer,
    ),
    2: (
      $spacer * 1.5,
    ),
    3: (
      $spacer * 3,
    ),
    4: (
      $spacer * 3.5,
    ),
    5: (
      $spacer * 4,
    ),
  ),
  $spacers
);

Expected behavior

I have checked other library before creating this issue and I found that reactstrap don't use any spacing utilities. So, even if someone changes bootstrap's customization UI doesn't look weird.

Versions

Libraries:

• BootstrapVue: 2.11.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

Not required

Demo link

None

Additional context

None