mdi-react
    TypeScript icon, indicating that this package has built-in type declarations

    7.5.0 • Public • Published

    mdi-react npm package Material Design Icons version build status

    Material Design Icons for React/Preact packaged as single components

    New v7.5.0 released: See CHANGELOG.md

    Installation

    npm install mdi-react
    # or if you use Yarn
    yarn add mdi-react

    Support for Preact is available via the mdi-preact package.
    The mdi-preact package supports class as alternative to className.

    Usage

    Just search for an icon on materialdesignicons.com and look for its name.
    The name translates to PascalCase followed by the suffix Icon in mdi-react.
    Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

    For example the icons named alert and alert-circle:

    import AlertIcon from 'mdi-react/AlertIcon';
    import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
    
    const MyComponent = () => {
      return (
        <div>
          {/* The default color is the current text color (currentColor) */}
          <AlertIcon color="#fff" />
          {/* The default size is 24 */}
          <AlertCircleIcon className="some-class" size={16} />
          {/* This sets the icon size to the current font size */}
          <AlertIcon size="1em" />
        </div>
      );
    };

    To change the color on hover you can just use your own class and plain CSS.

    .some-class:hover {
      fill: red;
    }

    You can also add default styling via the mdi-icon class.

    .mdi-icon {
      background-color: green;
    }

    Install

    npm i mdi-react

    DownloadsWeekly Downloads

    22,171

    Version

    7.5.0

    License

    (MIT AND OFL-1.1)

    Unpacked Size

    19 MB

    Total Files

    19407

    Last publish

    Collaborators

    • avatar