fix: fixing button issues

[rengare]

Related Issue

Realted to #1237

Description

The PR removes fd-reset from fd-icon since it broke button's example

Screenshots

Before:

Check the issue

After:

Please check whether the PR fulfills the following requirements

• all items on the PR Review Checklist are addressed :
  https://github.com/SAP/fundamental-styles/wiki/PR-Review-Checklist

[netlify]

Deploy preview for fundamental-styles ready!

Built with commit 431c3df

https://deploy-preview-1252--fundamental-styles.netlify.app

[jbadan]

Icons should still have a reset - you can override whatever style from the reset is causing the problem with style: inherit

[salarenko]

Icons should still have a reset - you can override whatever style from the reset is causing the problem with style: inherit

I don't think inherit can be successfully used in this flat structure. The things we can try:

• Lowering selector specificity changing icon implementation from this:

$block: sap-icon;

[class*="#{$block}"] {
  @include fd-reset();
  @include fd-icon-base();

  display: inline-block;
}

.#{$block} {
  @each $key, $value in $fd-icons {
    &--#{$key} {
      @include fd-icon-glyph($key);
    }
  }
}

To this:

%icon-base {
  @include fd-reset();
  @include fd-icon-base();

  display: inline-block;
}

.#{$block} {
  @each $key, $value in $fd-icons {
    &--#{$key} {
      @extend %icon-base;
      @include fd-icon-glyph($key);
    }
  }
}

But this still won't resolve all of the problems (file order import and selector strength "draw").

• Moving fd-reset to pseudo element where Icon actually exists

• Doing what @InnaAtanasova did in feat: refactor Info Label #1253