To help you get started, we've collected the most common ways that @rmwc/icon is being used within popular public projects.

fluidtrends / chunky / web / lib / components / Dashboard.js View on Github

value: function renderNav() {
      return _react2.default.createElement(
        'div',
        { style: {
            display: 'flex',
            flex: 1,
            marginBottom: 40,
            justifyContent: 'space-around'
          }, className: 'jsx-3157557023'
        },
        _react2.default.createElement(_icon.Icon, { onClick: this._onSectionNavigate(-1), use: 'navigate_before', style: { fontSize: 48, cursor: 'pointer', color: this.props.sectionSelectedColor } }),
        _react2.default.createElement(_icon.Icon, { onClick: this._onSectionNavigate(1), use: 'navigate_next', style: { fontSize: 48, cursor: 'pointer', color: this.props.sectionSelectedColor } })
      );
    }
  }, {

View more ways to use @rmwc/icon

Icons

Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.

• Module @rmwc/icon
• Import styles:
  • Using CSS Loader
    • import '@rmwc/icon/styles';
  • Or include stylesheets
    • '@rmwc/icon/icon.css'
• MDC Docs: https://material.io/icons

Setup

Icons are not part of the official material-components-web spec, but they are referenced many times in the documentation. RMWC provides a declarative way to use icons. Note that RMWC does not ship with any icons of its own. Make sure you include an icon set! You can use any one you want, but Google's Material Icons are available through open source. Follow Google's developer guide to get them setup with your app. https://google.github.io/material-design-icons/

There are lots of different strategies for implementing icons on the web, and the Icon component is flexible for most of them. Use ligatures, classNames, inline SVGs, HTML, or URLs to get icons into your app. The default strategy is 'ligature' which works with the material.io font icon set.

Basic Usage

The Icon component, (really the icon prop itself) can accept a variety of formats. Anywhere you see a component prop like icon or trailingIcon will inherit the same behavior.

  }
/>

<>
  {/**
    If you have additional options,
    you can pass an object of options to the icon prop.
  */}
  

  {/**
    Passing additional props is especially helpful when the entire icon
    component isn't exposed. In this example we pass the additional
    onMouseOver prop directly to the icon
  */}
  <button label="Hello!"> console.log('OVER')
    }}
  /&gt;

Icon Sizing

The Material spec details multiple sizes for icons. The Icon component doesn't assign a size by default, but these are available to you to force a size. Please note, this will only work if you've included the RMWC icon css file.

<>
  {/* 18px */}
  
  {/* 20px */}
  
  {/* 24px */}
  
  {/* 36px */}
  
  {/* 48px */}
  

Ligatures

This is for icon fonts that support ligatures like material-icons. This is the default strategy if nothing is set and doesn't require any additional setup if you are using material-icons.

<>
  
  
  {/* Example showing how to set the strategy explicitly */}
  

URLs

This is for icons that are accessible via HTTP(S) and will be loaded directly into an img tag. This can be auto-detected for things that look like urls. The image will be set as a backgroundImage of the icon. Make sure you impor the RMWC icon css file for this to work properly.

<>
  {/** Auto detection */}
  
  {/** Explicit */}
  

Components / Inline SVGs

This will render a child component inside of the icon. This is useful for all sorts of customization and for rendering inline SVGs. The following example shows rendering an SVG, as well as an arbitrary div.

<>
  {/** Auto detection */}
  
    }
  />
  {/** Explicit */}
  
          </button>