refactor(material): button and button group colors

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -352,12 +352,12 @@
             &:active {
                 @extend %item-overlay;
 
-                color: var-get($theme, 'item-selected-text-color');
+                color: var-get($theme, 'item-selected-hover-text-color');
                 background: var-get($theme, 'item-selected-background');
                 border-color: var-get($theme, 'item-selected-border-color');
 
                 igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
+                    color: var-get($theme, 'item-selected-hover-icon-color');
                 }
 
                 &::before {

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -407,7 +407,11 @@
         border-color: var-get($flat-theme, 'focus-visible-border-color');
 
         igx-icon {
-            color: var-get($flat-theme, 'icon-color');
+            @if $variant == 'material' {
+                color: var-get($flat-theme, 'icon-color-hover');
+            } @else {
+                color: var-get($flat-theme, 'icon-color');
+            }
         }
 
         &:hover {
@@ -547,7 +551,16 @@
         &:active {
             background: var-get($outlined-theme, 'focus-background');
             color: var-get($outlined-theme, 'focus-foreground');
-            border-color: var-get($outlined-theme, 'active-border-color');
+
+            @if $variant == 'material' {
+                border-color: var-get($outlined-theme, 'focus-border-color');
+
+                igx-icon {
+                    color: var-get($outlined-theme, 'focus-foreground');
+                }
+            } @else {
+                border-color: var-get($outlined-theme, 'active-border-color');
+            }
 
             @if $variant == 'indigo' {
                 igx-icon {