fix(button): Add Icon Styling Hook to Button with Icon (#4975)

Author: Alexis Córdova

RELEASENOTES.md

@@ -1,6 +1,14 @@
 <!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
 <!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
 
+## Release 2.17.2 - January 19, 2022
+
+## Components
+### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
+#### Added
+- Added `--slds-c-icon-color-foreground` Styling Hook to Button with Icon variant to accurately apply icon color updates
+  - Due to how the Lightning Base Component is configured, this is required to allow CSS Custom Property reassignment to function within Button Icons
+
 ## Release 2.17.1 - January 6, 2021
 
 ## Components

ui/components/button-icons/base/example.jsx

@@ -3,6 +3,8 @@
 
 import React from 'react';
 import ButtonIcon, { HintParent } from '../';
+import {Button} from '../../buttons/base/example';
+import SvgIcon from '../../../shared/svg-icon';
 
 export default [
   {
@@ -57,5 +59,18 @@ export let examples = [
         />
       </HintParent>
     )
+  },
+  {
+    id: 'button-icon-lbc-mismatch',
+    label: 'Button Icon - LBC Mismatch',
+    element: (
+      <Button className="slds-button_icon slds-button_icon-border">
+        <SvgIcon
+          sprite="utility"
+          symbol="clock"
+          className="slds-button__icon slds-icon-text-error"
+        />
+      </Button>
+    )
   }
 ];

ui/components/buttons/RELEASENOTES.md

@@ -4,11 +4,17 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.17.2
+
+### Added
+- Added `--slds-c-icon-color-foreground` Styling Hook to Button with Icon variant to accurately apply icon color updates
+  - Due to how the Lightning Base Component is configured, this is required to allow CSS Custom Property reassignment to function within Button Icons
 ## 2.17.0
 
 ### Added
 - Added Styling Hooks for Stateful Button and Dual Stateful Button.
 - Added missing `slds`-namespaced Styling Hooks (originally added in 2.16.0)
+
 ## 2.16.0
 
 ### Added

ui/components/buttons/base/_index.scss

@@ -569,7 +569,8 @@ a.slds-button--inverse:focus {
  */
 .slds-button__icon {
   @include square($square-icon-medium-content-alt);
-  fill: currentColor;
+  // Aura and LBC Button Icon components were created with a mix of approaches: partially with how Button Icon works and partially with Button _with_ Icon. Because of this, state classes (success/warning/error) within a Button Icon would never get the correct color, as this previously was hardcoded to `currentColor`. This is the least-invasive approach for remediation.
+  fill: var(--slds-c-icon-color-foreground, currentColor);
 }
 
 /**