Font Icons

Variables

md-font-icon-dense-size
$md-font-icon-dense-size: 20px !default;
Sass (Scss)

Description

The dense font icon size

Type

Number

Used by

md-font-icon-include-separators
$md-font-icon-include-separators: true !default;
Sass (Scss)

Description

Boolean if the icon separator styles should be included by default.

Type

Boolean
md-font-icon-include-dense
$md-font-icon-include-dense: true !default;
Sass (Scss)

Description

Boolean if the dense spec for icons should be included. This will update the size for icons to be smaller on desktop displays.

Type

Boolean

Used by

md-font-icon-include-dense-material-icons
$md-font-icon-include-dense-material-icons: $md-font-icon-include-dense !default;
Sass (Scss)

Description

Boolean if the font icons should be "fixed" for usage with material-icons. If the fonts are loaded after the styles of react-md, the created stylesheet will override the md-icon styles for creating dense icons. Enabling this boolean will manually update the styles so that md-icon has precedence.

Type

Boolean
md-font-icon-separator-padding
$md-font-icon-separator-padding: $md-default-padding !default;
Sass (Scss)

Description

The amount of padding to put between an icon and any text.

Type

Number

Used by

md-font-icon-light-theme-disabled-color
$md-font-icon-light-theme-disabled-color: rgba($md-black-base, .26) !default;
Sass (Scss)

Description

The light theme's disabled color for icons. This is actually not used. Use the $md-light-theme-colors Sass map instead.

Type

Color

See

md-font-icon-dark-theme-disabled-color
$md-font-icon-dark-theme-disabled-color: rgba($md-white-base, .3) !default;
Sass (Scss)

Description

The dark theme's disabled color for icons. This is actually not used. Use the $md-dark-theme-colors Sass map instead.

Type

Color

Mixins

react-md-icons
@mixin react-md-icons($light-theme: $md-light-theme, $include-media: $md-media-included, $include-separators: $md-font-icon-include-separators, $include-dense: $md-font-icon-include-dense, $include-dense-material-icons: $md-font-icon-include-dense-material-icons) {}
Sass (Scss)
Click to expand

Description

Includes the CSS for using md-icon.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the application is using the light-theme or not.

Boolean
$md-light-theme
$include-media

Boolean if the media queries for icons should also be included. This also relies on the include-dense param.

Boolean
$md-media-included
$include-separators

Boolean if the styles for separating content and an icon should be included.

Boolean
$md-font-icon-include-separators
$include-dense

Boolean if the dense spec for icons should be included.

Boolean
$md-font-icon-include-dense
$include-dense-material-icons

Boolean if the dense spec of font icons should also be force applied to the material-icons library. This can be set to false if you import the fonts before the react-md styles.

Boolean
$md-font-icon-include-dense-material-icons

Requires

Used by

react-md-icons-dense
@mixin react-md-icons-dense($include-dense-material-icons: $md-font-icon-include-dense-material-icons) {}
Sass (Scss)
Click to expand

Description

Updates the styles for an icon to use the dense font size. This should really only be used within a media query.

Parameters

NameDescriptionTypeDefault value
$include-dense-material-icons

Boolean if the material-icons font icon library should be adjusted to support dense icons.

Boolean
$md-font-icon-include-dense-material-icons

Requires

Used by

react-md-icon-separators
@mixin react-md-icon-separators {}
Sass (Scss)
Click to expand

Description

Includes the styles for the IconSeparator component.

Parameters

None

Examples

Example Usage SCSS

@include react-md-icon-separators;
Sass (Scss)

Requires

Used by

react-md-theme-icons
@mixin react-md-theme-icons($light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Updates the color of the base md-icon if the $light-theme parameter does not equal the global $md-light-theme.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme

Requires

Used by

react-md-icons-media
@mixin react-md-icons-media($include-dense: $md-font-icon-include-dense, $include-dense-material-icons: $md-font-icon-include-dense-material-icons) {}
Sass (Scss)
Click to expand

Description

Creates the media queries for icons. This really only is used for the dense spec of icons.

Parameters

NameDescriptionTypeDefault value
$include-dense

Boolean if the dense specs for icons should be included.

Boolean
$md-font-icon-include-dense
$include-dense-material-icons

Boolean if the material-icons font icon library should be adjusted to support dense icons.

Boolean
$md-font-icon-include-dense-material-icons

Requires

Used by