material-icons

    1.3.0 • Public • Published

    material-icons Downloads

    Latest icon fonts and CSS for self-hosting material design icons.

    This package is automatically updated, so it will always have the latest icons from Google.

    For SVGs, see @material-design-icons/svg

    Installation

    Install the latest version using:

    npm install material-icons@latest

    Note: If you are upgrading from 0.x to 1.x see the 1.0.0 release notes.

    Usage

    Import in JS (example: src/index.js in Create React App, src/main.js in Vue CLI):

    import 'material-icons/iconfont/material-icons.css';

    or import in CSS (example: src/styles.css in Angular CLI):

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

    or import in HTML:

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

    To display an icon, use one of the following:

    <span class="material-icons">pie_chart</span>          <!-- Filled -->
    <span class="material-icons-outlined">pie_chart</span> <!-- Outlined -->
    <span class="material-icons-round">pie_chart</span>    <!-- Round -->
    <span class="material-icons-sharp">pie_chart</span>    <!-- Sharp -->
    <span class="material-icons-two-tone">pie_chart</span> <!-- Two Tone -->

    Reducing Build Size

    The default material-icons.css includes CSS for all fonts. This may cause build tools such as webpack to copy all fonts to the build directory even if you are not using all of them. To reduce the build size, import only the styles you need. For example, if you only need filled and outlined icons, import filled.css and outlined.css instead of the default material-icons.css:

    -import 'material-icons/iconfont/material-icons.css';
    +import 'material-icons/iconfont/filled.css';
    +import 'material-icons/iconfont/outlined.css';
    Show all
    Icons CSS Sass
    Filled filled.css filled.scss
    Outlined outlined.css outlined.scss
    Round round.css round.scss
    Sharp sharp.css sharp.scss
    Two Tone two-tone.css two-tone.scss

    Using Sass

    Import in Sass (example: src/styles.scss in Angular CLI):

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

    Available Sass variables:

    $material-icons-font-path: './' !default;
    $material-icons-font-size: 24px !default;
    $material-icons-font-display: block !default;

    If you are getting errors with webpack or Vue CLI, add this line before importing:

    $material-icons-font-path: '~material-icons/iconfont/';

    Using Angular mat-icon

    To display an icon, use one of the following:

    <mat-icon>pie_chart</mat-icon>
    <mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>
    <mat-icon fontSet="material-icons-round">pie_chart</mat-icon>
    <mat-icon fontSet="material-icons-sharp">pie_chart</mat-icon>
    <mat-icon fontSet="material-icons-two-tone">pie_chart</mat-icon>

    Using CSS Classes

    Alternatively, you may use CSS classes instead of ligatures to display icons. Learn more

    Available Icons

    See demo.

    License

    Material design icons are created by Google.

    We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.

    Install

    npm i material-icons

    DownloadsWeekly Downloads

    80,395

    Version

    1.3.0

    License

    Apache-2.0

    Unpacked Size

    1.89 MB

    Total Files

    33

    Last publish

    Collaborators

    • marella