Skip to main content
react-md
react-md - Icon - SassDoc

Variables

rmd-icon-color

Color

The base icon color to apply.

$rmd-icon-color: rmd-theme-var(text-icon-on-background) !default;

rmd-icon-size

Number

The base icon size to use.

$rmd-icon-size: 1.5rem !default;

rmd-icon-dense-size

Number

The dense icon size to use. If you do not want to include the dense icon spec, disable the $rmd-icon-include-dense variable.

$rmd-icon-dense-size: 1.25rem !default;
See also

rmd-icon-include-dense

Boolean

Boolean if the dense spec for icons should be included. This will just generate .md-icon--font-dense and .md-icon--svg-dense class names that can be applied.

$rmd-icon-include-dense: true !default;

rmd-icon-material-icons-font

Boolean

Boolean if you are using the material-icons font icon library. This will update the dense theme to fix material icons as well.

$rmd-icon-material-icons-font: false !default;

rmd-icon-use-font-icons

Boolean

Boolean if font icons should be used. Normally only one of font icons or svg icons should be used within your application, so you can disable the style generation for the unused type to save a few bytes.

$rmd-icon-use-font-icons: true !default;
See also

rmd-icon-use-svg-icons

Boolean

Boolean if svg icons should be used. Normally only one of font icons or svg icons should be used within your application, so you can disable the style generation for the unused type to save a few bytes.

$rmd-icon-use-svg-icons: true !default;
See also

rmd-icon-spacing-with-text

Number

The amount of spacing to apply between an icon and text within the TextIconSpacing component.

$rmd-icon-spacing-with-text: 0.5rem !default;

rmd-icon-rotator-transition-time

Number

The transition time for the icon rotator to fully rotate.

$rmd-icon-rotator-transition-time: 0.15s !default;

rmd-icon-rotator-from

Number

The default starting position for the IconRotator component. This needs to be a valid transformation value to work.

$rmd-icon-rotator-from: rotate(0deg) !default;

rmd-icon-rotator-to

Number

The default ending position for the IconRotator component. This needs to be a valid transformation value to work.

$rmd-icon-rotator-to: rotate(180deg) !default;

rmd-icon-theme-values

Map

A Map of all the "themeable" parts of the icon package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-icon-theme-values: (
  color: $rmd-icon-color,
  size: $rmd-icon-size,
  dense-size: $rmd-icon-dense-size,
  text-spacing: $rmd-icon-spacing-with-text,
  rotate-to: $rmd-icon-rotator-to,
  rotate-from: $rmd-icon-rotator-from,
) !default;

Mixins

rmd-icon-material-icons-font-face

mixin

Creates the font face for material icons. This takes either a font url prefix string or a map of urls for each required font file. If you are using create-react-app, you must use the Map version so the fonts can be correctly included by the build process.

Parameters
NameDescriptionTypeDefault Value
$font-url-or-map

This is either a font url prefix for the folder that is "hosting" the material icons or a Map of direct urls for the eot, woff2, woff, and truetype material icon fonts.

Map|String'/fonts/material-icons'
$old-ie-support

Boolean if there should be a fallback for IE6-8 by including a url to the eot font. If this is set to true and using the Map version of $font-url-or-map, you must also include a url to the eot font.

Booleanfalse
Throws
  • It is required to include all of \

Examples

create-react-app Example Usage
// This is going to assume you have downloaded the material-icons zip with
// all the icon font files and copied it into `src/fonts/material-icons`
// and you are including the fonts in `src/index.scss`
@include rmd-icon-material-icons-font-face(
  (
    woff2: url(./fonts/material-icons/MaterialIcons-Regular.woff2),
    woff: url(./fonts/material-icons/MaterialIcons-Regular.woff),
    truetype: url(./fonts/material-icons/MaterialIcons-Regular.ttf),
  )
);
Example Usage SCSS
$local-font-url: '/fonts/material-icons';
@include rmd-icon-material-icons-font-face($local-font-url);

rmd-icon-material-icons-class

mixin

Creates the material-icons css class if hosting material icons locally instead of using the Google fonts service. By default, this will not include the font-size size you should be using the FontIcon component from react-md which adds the correct font-size.

Parameters
NameDescriptionTypeDefault Value
$include-font-size

Boolean if the material icons class name should include the default icon font size.

Booleanfalse

rmd-icon-host-material-icons

mixin

Creates both the font face and css class for material icons when hosting the fonts locally instead of using the Google fonts service. This takes either a font url prefix string or a map of urls for each required font file. If you are using create-react-app, you must use the Map version so the fonts can be correctly included by the build process.

Parameters
NameDescriptionTypeDefault Value
$font-url-or-map

This is either a font url prefix for the folder that is "hosting" the material icons or a Map of direct urls for the eot, woff2, woff, and truetype material icon fonts.

Map|String'/fonts/material-icons'
$include-font-size

Boolean if the material icons class name should include the default icon font size.

Booleanfalse
$old-ie-support

Boolean if there should be a fallback for IE6-8 by including a url to the eot font. If this is set to true and using the Map version of $font-url-or-map, you must also include a url to the eot font.

Booleanfalse

Examples

Example Usage SCSS
$local-font-url: '/fonts/material-icons';
@include rmd-icon-material-icons-font-face($local-font-url);
Using Absolute Paths
// This example will assume that the material icons font has been
// downloaded and copied into the `public/fonts/material-icons` folder
// The fonts will not be bundled with your normal build process and just
// will be static assets.

// The next 2 lines are equivalent
@include rmd-icon-material-icons-font-face;
@include rmd-icon-material-icons-font-face('/fonts/material-icons');

@include rmd-typography-host-google-font('Source Code Pro');
Using Relative Paths
// Since it might be useful to include the font in the normal build
// process to hash and prefix the urls as needed, you can also use
// relative paths instead of absolute paths.
// This example will assume you are working within a `src/fonts.scss` file
// and have copied material-icons into a `src/fonts/material-icons` directory

// Note the `~./`. This will resolve this import to the `src` directory
// within create-react-app
@include rmd-icon-material-icons-font-face('~./fonts/material-icons');

rmd-icon-theme

mixin

Creates the styles for one of the icon's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-icon-theme-values value to.

String
$theme-style

One of the keys of rmd-icon-theme-values to extract a value from.

Stringproperty
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-icon-theme-values map when null.

Color|String|Numbernull

rmd-icon-theme-update-var

mixin

Updates one of the icon's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The icon theme style type to update. This should be one of the $rmd-icon-theme-values keys.

String
$value

The new value to use.

Color|String|Number

Examples

Example SCSS Usage
.bigger-icon-section {
  @include rmd-icon-theme-update-var(size, 4rem);
}
Updating the base icon size with a media query
:root {
  @media (min-width: 75rem) {
    @include rmd-icon-theme-update-var(size, rmd-icon-theme(dense-size));
  }
}

rmd-icon-base

mixin

Creates the base styles for icons. This should be combined with the rmd-icon-font or rmd-icon-svg mixins to get the full styles.

rmd-icon-font

mixin

Creates the base styles for a font icon.

Examples

Example SCSS Usage
.font-icon {
  @include rmd-icon-base;
  @include rmd-icon-font;
}

rmd-icon-dense-theme

mixin

A simple mixin to create the dense theme for an icon.

rmd-icon-svg

mixin

Creates the base styles for an svg icon.

Examples

Example SCSS Usage
.svg-icon {
  @include rmd-icon-base;
  @include rmd-icon-svg;
}

rmd-icon-text-spacing

mixin

Creates the styles that should be applied to an icon that is placed before or after text by applying the spacing to the provided $property value. This will automatically be swapped when the language changes to right-to-left.

Parameters
NameDescriptionTypeDefault Value
$spacing

The amount of spacing to apply.

Number$rmd-icon-spacing-with-text
$property

The property that should be used for applying the spacing

Stringmargin-left

rmd-icon-spaced-with-text

mixin

A mixin to create the styles to space an icon before or after text with the provided selectors and spacing.

Parameters
NameDescriptionTypeDefault Value
$before-selector

The selector to use for determining if an icon is placed before or after the text. If this is set to null, no before styles will be created.

String'&--before'
$after-selector

The selector to use for determining if an icon is placed before or after the text. If this is set to null, no after styles will be created.

String'&--after'
$above-selector

The selector to use for determining if an icon is placed above or below the text. If this is set to null, no before styles will be created.

String'&--above'
$below-selector

The selector to use for determining if an icon is placed above or below the text. If this is set to null, no after styles will be created.

String'&--after'
$spacing

The amount of spacing to apply.

Number$rmd-icon-spacing-with-text

Examples

Updating Selectors
// create a component so that it uses the :first-child and :last-child css
// selectors instead of class names that must be applied.
.my-wrapper {
  @include rmd-icon-spaced-with-text('&:first-child', '&:last-child');
}

rmd-icon-rotator

mixin

Creates the styles for the IconRotator component. These styles are extremely simple and basically apply different rotate transforms based on a class name.

rmd-icon

mixin

Creates all the styles for the icon components.

rmd-icon-spacing

mixin

Creates the styles for when the TextIconSpacing component needs to wrap the content in a <span>. It's really used to force vertical center alignment.

react-md-icon

mixin

Creates the styles for icons within react-md. This requires either the rmd-icon-use-font-icons or rmd-icon-use-svg-icons variables to be enabled to generate any styles.

Throws
  • Either svg or font icons must be used for this package but both were set to false. Please enable one of them to include icons.

Functions

rmd-icon-theme

function

This function is used to quickly get one of the icon's theme values. This is really just for the rmd-icon-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the icon's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-icon-theme-values map keys to get a value for.

String

rmd-icon-theme-var

function

This function is used to get one of the icon's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-icon-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the link's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-icon-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull