Fix: Material icon color in buttons (streamlit#9393)

Ensure material icons are passed the appropriate color by having them inherit the parent (button) color. This is more robust given primary and secondary button types.

e2e_playwright/st_button_test.py

@@ -43,6 +43,12 @@ def test_button_widget_rendering(
     # The rest is tested in one screenshot in the following test
 
 
+def test_material_icon_hover(app: Page, assert_snapshot: ImageCompareFunction):
+    material_icon_button = app.get_by_test_id("stButton").nth(7)
+    app.get_by_text("Like Button").hover()
+    assert_snapshot(material_icon_button, name="st_button-material_icon_hover")
+
+
 def test_buttons_in_columns(themed_app: Page, assert_snapshot: ImageCompareFunction):
     """Test that the button widgets are correctly rendered in columns via screenshot matching."""
     columns_container = themed_app.get_by_test_id("stHorizontalBlock")

frontend/lib/src/components/shared/BaseButton/DynamicButtonLabel.tsx

@@ -16,9 +16,6 @@
 
 import React from "react"
 
-import { useTheme } from "@emotion/react"
-
-import { EmotionTheme } from "@streamlit/lib/src/theme"
 import { DynamicIcon } from "@streamlit/lib/src/components/shared/Icon"
 import StreamlitMarkdown from "@streamlit/lib/src/components/shared/StreamlitMarkdown"
 
@@ -31,8 +28,6 @@ export const DynamicButtonLabel = ({
   icon,
   label,
 }: DynamicButtonLabelProps): React.ReactElement | null => {
-  const { colors }: EmotionTheme = useTheme()
-
   // Material icons need to be larger to render similar size of emojis, emojis need addtl margin
   const isMaterialIcon = icon.startsWith(":material")
   const iconMargin = isMaterialIcon ? "0 sm 0 0" : "0 md 0 0"
@@ -43,7 +38,7 @@ export const DynamicButtonLabel = ({
         <DynamicIcon
           size={isMaterialIcon ? "lg" : "base"}
           margin={label ? iconMargin : "0"}
-          color={colors.bodyText}
+          color="inherit"
           iconValue={icon}
         />
       )}