diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss index 3a76713f1a..c95fb4c1bf 100644 --- a/packages/core/src/components/toolbar/toolbar.ios.scss +++ b/packages/core/src/components/toolbar/toolbar.ios.scss @@ -168,6 +168,13 @@ } +// iOS Toolbar Button Icon +// -------------------------------------------------- + +.bar-button-ios .icon { + fill: $toolbar-ios-button-icon-fill-color; +} + // iOS Toolbar Button Outline // -------------------------------------------------- diff --git a/packages/core/src/components/toolbar/toolbar.ios.vars.scss b/packages/core/src/components/toolbar/toolbar.ios.vars.scss index a88c5ec317..58b128e249 100644 --- a/packages/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/packages/core/src/components/toolbar/toolbar.ios.vars.scss @@ -27,6 +27,9 @@ $toolbar-ios-button-border-radius: 4px !default; /// @prop - Font weight of the strong toolbar button $toolbar-ios-button-strong-font-weight: 600 !default; +/// @prop - Fill color of the toolbar button icon +$toolbar-ios-button-icon-fill-color: currentColor !default; + /// @prop - Filter of the translucent toolbar $toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default; diff --git a/packages/core/src/components/toolbar/toolbar.md.scss b/packages/core/src/components/toolbar/toolbar.md.scss index d458db735f..d43d69f70a 100644 --- a/packages/core/src/components/toolbar/toolbar.md.scss +++ b/packages/core/src/components/toolbar/toolbar.md.scss @@ -174,6 +174,14 @@ } +// Material Design Toolbar Button Icon +// -------------------------------------------------- + +.bar-button-md .icon { + fill: $toolbar-md-button-icon-fill-color; +} + + // Material Design Toolbar Button Outline // -------------------------------------------------- diff --git a/packages/core/src/components/toolbar/toolbar.md.vars.scss b/packages/core/src/components/toolbar/toolbar.md.vars.scss index 0e38e484a8..9cacc79ba1 100644 --- a/packages/core/src/components/toolbar/toolbar.md.vars.scss +++ b/packages/core/src/components/toolbar/toolbar.md.vars.scss @@ -24,5 +24,8 @@ $toolbar-md-button-color: color-contrast($colors-md, $toolbar-md- /// @prop - Border radius of the toolbar button $toolbar-md-button-border-radius: 2px !default; +/// @prop - Fill color of the toolbar button icon +$toolbar-md-button-icon-fill-color: currentColor !default; + /// @prop - Font weight of the strong toolbar button $toolbar-md-button-strong-font-weight: bold !default;