Icon Sass API

Variables

icon-disable-font

$icon-disable-font: false !default;

Examples

Font Icons Only

@use "@react-md/core" with (
  $disable-svg: true,
  $disable-symbol: true
);

Used By

• @mixin icon-styles

icon-disable-svg

$icon-disable-svg: false !default;

Examples

SVG Icons Only

@use "@react-md/core" with (
  $disable-font: true,
  $disable-symbol: true
);

Used By

• @mixin icon-styles

icon-disable-symbol

$icon-disable-symbol: false !default;

Examples

Material Symbols Icons Only

@use "@react-md/core" with (
  $disable-font: true,
  $disable-svg: true
);

Used By

• @mixin icon-variables
• @mixin icon-styles

icon-disable-dense

$icon-disable-dense: false !default;

icon-disable-inline

$icon-disable-inline: false !default;

Used By

• @mixin icon-styles

icon-disable-current-color

$icon-disable-current-color: false !default;

Used By

• @mixin icon-styles

icon-disable-spacing-before

$icon-disable-spacing-before: false !default;

Used By

• @mixin icon-styles

icon-disable-spacing-after

$icon-disable-spacing-after: false !default;

Used By

• @mixin icon-styles

icon-disable-spacing-above

$icon-disable-spacing-above: false !default;

Used By

• @mixin icon-styles

icon-disable-spacing-below

$icon-disable-spacing-below: false !default;

Used By

• @mixin icon-styles

icon-disable-rotator

$icon-disable-rotator: false !default;

Used By

• @mixin icon-variables
• @mixin icon-styles

icon-light-theme-color

$icon-light-theme-color: color.adjust(#000, $lightness: 46%) !default;

icon-dark-theme-color

$icon-dark-theme-color: color.adjust(#fff, $lightness: -30%) !default;

icon-color

$icon-color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;

icon-size

$icon-size: 1.5rem !default;

icon-dense-size

$icon-dense-size: 1.25rem !default;

Used By

• @mixin icon-variables
• @mixin input-toggle-styles

icon-symbol-fill

$icon-symbol-fill: 0 !default;

Used By

• @mixin icon-variables

icon-symbol-weight

$icon-symbol-weight: 400 !default;

Used By

• @mixin icon-variables

icon-symbol-grade

$icon-symbol-grade: 0 !default;

Used By

• @mixin icon-variables

icon-symbol-optical-size

$icon-symbol-optical-size: 48 !default;

Used By

• @mixin icon-variables

icon-spacing

$icon-spacing: spacing.get-var(sm) !default;

icon-rotate-from

$icon-rotate-from: 0deg !default;

icon-rotate-to

$icon-rotate-to: 180deg !default;

icon-rotate-duration

$icon-rotate-duration: transition.$linear-duration !default;

Used By

• @mixin icon-styles

icon-variables

$icon-variables: (
  color,
  size,
  dense-size,
  spacing,
  rotate-from,
  rotate-to,
  symbol-fill,
  symbol-grade,
  symbol-weight,
  symbol-optical-size
);

Mixins

icon-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

icon-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

icon-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $icon-_disable-icons
• $divider-light-theme-color

icon-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $icon-_disable-icons
• $divider-dark-theme-color

icon-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $icon-_disable-icons
• $avatar-color
• $avatar-size
• $app-bar-disable-dense
• $icon-dense-size
• $divider-spacing
• $icon-disable-symbol
• $icon-symbol-fill
• $icon-symbol-grade
• $icon-symbol-weight
• $icon-symbol-optical-size
• $icon-disable-rotator
• $expansion-panel-rotate-from
• $expansion-panel-rotate-to

icon-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• $icon-_disable-icons
• $icon-disable-font
• $icon-disable-svg
• $icon-disable-symbol
• $icon-disable-current-color
• $icon-disable-inline
• $icon-disable-spacing-before
• $icon-disable-spacing-after
• $icon-disable-spacing-above
• $icon-disable-spacing-below
• $app-bar-disable-dense
• $icon-disable-rotator
• $icon-rotate-duration

Functions

icon-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable the font icon styles. You normally want to only have one icon type enabled.

Set to true to disable the svg icon styles. You normally want to only have one icon type enabled.

Set to true to disable the symbol icon styles. You normally want to only have one icon type enabled.

Set to true to disable the dense icon sizes

Set to true to disable the styles for aligning icons within inline text blocks (like paragraphs).

Set to true to disable the styles for inheriting the current color.

Set to true to disable the .rmd-icon--before styles with the TextIconSpacing component.

Set to true to disable the .rmd-icon--after styles with the TextIconSpacing component.

Set to true to disable the .rmd-icon--above styles with the TextIconSpacing component.

Set to true to disable the .rmd-icon--below styles with the TextIconSpacing component.

Set to true to disable the icon rotator styles

The default icon color when using the global light theme

The default icon color when using the global dark theme

The default icon color

The default icon size

The default icon dense size

This is the default material symbol fill value. It should be one of:

• 0
• 1

This is the default material symbol weight value. It should be one of:

• 100
• 200
• 300
• 400
• 500
• 600
• 700

This is the default material symbol grade value. It should be one of:

• -25
• 0
• 200

This is the default material symbol fill value. It should be one of:

• 20
• 24
• 40
• 48

The default spacing for the TextIconSpacing component or anytime icons should be separated from other content.

The default IconRotator starting position

The default IconRotator ending position

The default IconRotator transition duration

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value