Needless Patchouli Manufacture
    Wondering what’s next for npm?Check out our public roadmap! »

    material-icons

    0.6.1 • Public • Published

    Material Icons

    Material design icon font and CSS framework for self hosting the icons.

    This package contains only the icon font and required CSS. So it is considerably smaller than the official material-design-icons package and easy to install.

    Installation

    Download the latest release or install using npm:

    npm install material-icons
    

    Usage

    Font files are present in the iconfont directory and can be imported using CSS.

    Import CSS:

    <link rel="stylesheet" href="/path/to/material-icons/iconfont/material-icons.css">

    To display an icon, use:

    <span class="material-icons">home</span>

    To display outlined, round, sharp and two tone icons, use:

    <span class="material-icons-outlined">home</span>
    <span class="material-icons-round">home</span>
    <span class="material-icons-sharp">home</span>
    <span class="material-icons-two-tone">home</span>

    To customize the build, import Sass instead of CSS:

    @import 'material-icons/iconfont/material-icons.scss';

    If you are using webpack sass-loader, use:

    $material-icons-font-path: '~material-icons/iconfont/';
    
    @import '~material-icons/iconfont/material-icons.scss';

    Available Sass variables:

    $material-icons-codepoints: () !default; /* Sass map of icon names and codepoints */
    $material-icons-font-path: '' !default;
    $material-icons-font-name: 'MaterialIcons-Regular' !default;
    $material-icons-font-size: 24px !default;
    $material-icons-font-family: 'Material Icons' !default;
    $material-icons-font-display: block !default;

    Available Sass mixins:

    .material-icons {
      @include material-icons();
    }

    CSS Classes (Optional)

    Alternatively, you may use CSS classes to display an icon.

    Note: This method is not recommended as it requires a large CSS file to be imported in addition to above files. Also it might not work with some icons as Google hasn't updated codepoints for new icons.

    Import CSS:

    <link rel="stylesheet" href="/path/to/material-icons/css/material-icons.min.css">

    To display an icon, use:

    <span class="mi mi-home"></span>

    To display outlined, round, sharp and two tone icons, use:

    <span class="mi-outlined mi-home"></span>
    <span class="mi-round mi-home"></span>
    <span class="mi-sharp mi-home"></span>
    <span class="mi-two-tone mi-home"></span>

    To customize the build, import Sass instead of CSS:

    @import 'material-icons/css/material-icons.scss';

    If you are using webpack sass-loader, use:

    @import '~material-icons/css/material-icons.scss';

    Available Sass variables:

    $material-icons-css-prefix: 'mi' !default;
    $material-icons-css-search: '_' !default;
    $material-icons-css-replace: '-' !default; /* To replace '_' with '-' in CSS class names */

    Available Sass mixins:

    .mi-home {
      @include material-icon('home');
    }

    Available Icons

    See demo.

    Install

    npm i material-icons

    DownloadsWeekly Downloads

    41,618

    Version

    0.6.1

    License

    Apache-2.0

    Unpacked Size

    5.3 MB

    Total Files

    39

    Last publish

    Collaborators

    • avatar