The base icon color to apply.
$rmd-icon-color: rmd-theme-var(text-icon-on-background) !default;The base icon size to use.
$rmd-icon-size: 1.5rem !default;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;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;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;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;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;The amount of spacing to apply between an icon and text within the TextIconSpacing component.
$rmd-icon-spacing-with-text: 0.5rem !default;The transition time for the icon rotator to fully rotate.
$rmd-icon-rotator-transition-time: 0.15s !default;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;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;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;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.
| Name | Description | Type | Default 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 | Boolean | false |
@use 'react-md' as *;
// 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),
)
);
@use 'react-md' as *;
$local-font-url: '/fonts/material-icons';
@include rmd-icon-material-icons-font-face($local-font-url);
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.
| Name | Description | Type | Default Value |
|---|---|---|---|
$include-font-size | Boolean if the material icons class name should include the default icon font size. | Boolean | false |
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.
| Name | Description | Type | Default 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. | Boolean | false |
$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 | Boolean | false |
@use 'react-md' as *;
$local-font-url: '/fonts/material-icons';
@include rmd-icon-material-icons-font-face($local-font-url);
@use 'react-md' as *;
// 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');
@use 'react-md' as *;
// 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');
Creates the styles for one of the icon's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | property |
$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 | Color|String|Number | null |
Updates one of the icon's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The icon theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
@use 'react-md' as *;
.bigger-icon-section {
@include rmd-icon-theme-update-var(size, 4rem);
}
@use 'react-md' as *;
:root {
@media (min-width: 75rem) {
@include rmd-icon-theme-update-var(size, rmd-icon-theme(dense-size));
}
}
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.
Creates the base styles for a font icon.
@use 'react-md' as *;
.font-icon {
@include rmd-icon-base;
@include rmd-icon-font;
}
A simple mixin to create the dense theme for an icon.
Creates the base styles for an svg icon.
@use 'react-md' as *;
.svg-icon {
@include rmd-icon-base;
@include rmd-icon-svg;
}
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.
| Name | Description | Type | Default 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 | String | margin-left |
A mixin to create the styles to space an icon before or after text with the provided selectors and spacing.
| Name | Description | Type | Default Value |
|---|---|---|---|
$before-selector | The selector to use for determining if an icon is placed before or after the text. If this is set to | 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 | 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 | 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 | String | '&--after' |
$spacing | The amount of spacing to apply. | Number | $rmd-icon-spacing-with-text |
@use 'react-md' as *;
// 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');
}
Creates the styles for the IconRotator component. These styles are extremely simple and basically apply different rotate transforms based on a class name.
Creates all the styles for the icon components.
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.
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.
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.
Color|String|Numberone of the icon's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the link's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |