This package exports two different icon components so that you can create icons either from a font icon library or custom SVG paths. The example below also shows some force sizing props to help adjust the icon size when non-material icons font libraries don't have consistent sizes for their icons.

If you are using material icons, it's recommended to check out the @react-md/material-icons page instead for this simple example as it'll make it easier to include pre-made icons. Most of the remaining examples on this page will be using that library since I'm terrible at remembering icon names.

Note: All icons will default to have aria-hidden="true" by default since they normally are presentational data for users and shouldn't be read by screen readers. If you provide an aria-label or aria-labelledby attribute to an SVG Icon, the aria-hidden will be removed instead.

The TextIconSpacing component is extremely useful since it allows you to render an icon or any component separated by any text or another component with some spacing in-between. The main use case for this component will be within buttons, but it can be updated to be used in other components to add spacing between any two elements.

The way the TextIconSpacing component works is that it'll inject a new className prop into the provided icon prop component. You'll need to ensure that the icon passes a className prop down to the top-level element, or use the forceIconWrap prop to always wrap the icon in a <span> with the className instead. In addition, it will return a <Fragment> of the icon + children so no additional DOM elements are created. This is great when you are reusing existing react-md components, but otherwise you'll probably want to wrap your component in an element that has:

.wrapper {
  align-items: center;
  display: flex;
}

so that the icon and text are aligned nicely.

The @react-md/list package is a good example of using this package. It uses this component to add the correct spacing around the icons and avatars within each list item.

A lot of components within react-md end up using icons to help display supplementary data out of the box. The default implementation is to use the Material Icons font icon implementation to have a "nice" starting point to keep the react-md bundle size a bit smaller. Unfortunately, this might not be ideal for all applications and designs since you might want to use a different font icon library, use SVG icons from @react-md/material-icons, or use your own custom icons.

Icons can be overridden two different ways:

• Per-component basis by using the icon prop or Icon suffixed prop (dropdownIcon for example)
• Global level with the IconProvider component

  Note: The @react-md/layout's Configuration component supports this global-level override with the icons prop.

For each icon that gets passed to the IconProvider, all components that reference that icon type will also use it unless the icon prop has been defined. Check out the example below for a better understanding.