发表新帖
发表新帖

How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

前端 未结
关注
15 1717
清歌不尽
清歌不尽 2020-11-28 18:10

Google has revamped its Material Design Icons with 4 new preset themes:

Outlined, Rounded, Two-Tone and Sharp, in addition to the regular Fil

相关标签:
15条回答
  • 没有蜡笔的小新
    2020-11-28 18:17

    Setting up the Two-tone color:

    As described above you can use the color css key except for materials Two-tone theme which seems to be glitchy ;-)

    A workaround is described in one of several angular material github issue's by using a custom css filter. This custom filter can be generated here.

    E.g.:

    Html:

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone red">home</i>

    css:

    .red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

    Attachments:

    • Working Angular Stackblitz
    • Codepen example
    • Codepen CSS filter Generator
    0 讨论(0)
  • 天命终不由人
    2020-11-28 18:19

    I ended up using IcoMoon app to create a custom font using only the new themed icons I required for a recent web app build. It's not perfect but you can mimic the existing Google Font functionality pretty nicely with a little bit of setup. Here's a writeup:

    https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

    If someone is feeling daring, they could convert the entire theme using IcoMoon. Hell, IcoMoon probably has an internal process that would make it easy since they already have the original Material Icons set in their library.

    Anyway, this isn't a perfect solution, but it worked for me.

    0 讨论(0)
  • 天命终不由人
    2020-11-28 18:20

    Update (31/03/2019) : All icon themes work via Google Web Fonts now.

    As pointed out by Edric, it's just a matter of adding the google web fonts link in your document's head now, like so:

    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

    And then adding the correct class to output the icon of a particular theme.

    <i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

    The color of the icons can be changed using CSS as well.

    Note: the Two-tone theme icons are a bit glitchy at present.

    Update (14/11/2018) : List of 16 outline icons that work with the "_outline" suffix.

    Here's the most recent list of 16 outline icons that work with the regular Material-icons Webfont, using the _outline suffix (tested and confirmed).

    (As found on the material-design-icons github page. Search for: "_outline_24px.svg")

    <i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>

    Note that pie_chart needs to be "pie_chart_outlined" and not outline.

    This is a hack to test out the new icon themes using an inline tag. It's not the official solution.

    As of today (July 19, 2018), a little over 2 months since the new icons themes were introduced, there is No Way to include these icons using an inline tag <i class="material-icons"></i>.

    +Martin has pointed out that there's an issue raised on Github regarding the same: https://github.com/google/material-design-icons/issues/773

    So, until Google comes up with a solution for this, I've started using a hack to include these new icon themes in my development environment before downloading the appropriate icons as SVG or PNG. And I thought I'd share it with you all.

    IMPORTANT: Do not use this on a production environment as each of the included CSS files from Google are over 1MB in size.

    Google uses these stylesheets to showcase the icons on their demo page:

    Outline:

    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

    Rounded:

    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

    Two-Tone:

    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

    Sharp:

    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

    Each of these files contain the icons of the respective themes included as background-images (Base64 image-data). And here's how we can use this to test out the compatibility of a particular icon in our design before downloading it for use in the production environment.

    STEP 1:

    Include the stylesheet of the theme that you want to use. Eg: For the 'Outlined' theme, use the stylesheet for 'outline.css'

    STEP 2:

    Add the following classes to your own stylesheet:

    .material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

    STEP 3:

    Use the icon by adding the following classes to the <i> tag:

    1. material-icons-new class

    2. Icon name as shown on the material icons demo page, prefixed with the theme name followed by a hyphen.

    Prefixes:

    Outlined: outline-

    Rounded: round-

    Two-Tone: twotone-

    Sharp: sharp-

    Eg (for 'announcement' icon):

    outline-announcement, round-announcement, twotone-announcement, sharp-announcement

    3) Use an optional 3rd class icon-white for inverting the color from black to white (for dark backgrounds)

    Changing icon size:

    Since this is a background-image and not a font-icon, use the height and width properties of CSS to modify the size of the icons. The default is set to 24px in the material-icons-new class.

    Example:

    Case I: For the Outlined Theme of the account_circle icon:

    1. Include the stylesheet:
    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
    1. Add the icon tag on your page:
    <i class="material-icons-new outline-account_circle"></i>

    Optional (For dark backgrounds):

    <i class="material-icons-new outline-account_circle icon-white"></i>

    Case II: For the Sharp Theme of the assessment icon:

    1. Include the stylesheet:
    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
    1. Add the icon tag on your page:
    <i class="material-icons-new sharp-assessment"></i>

    (For dark backgrounds):

    <i class="material-icons-new sharp-assessment icon-white"></i>

    I can't stress enough that this is NOT THE RIGHT WAY to include the icons on your production environment. But if you have to scan through multiple icons on your in-development page, it does make the icon inclusion pretty easy and saves a lot of time.

    Downloading the icon as SVG or PNG sure is a better option when it comes to site-speed optimization, but font-icons are a time-saver when it comes to the prototyping phase and checking if a particular icon goes with your design, etc.

    I will update this post if and when Google comes up with a solution for this issue that does not involve downloading an icon for usage.

    0 讨论(0)
  • 夕颜
    2020-11-28 18:20

    New themes are probably not (yet?) part of the Material Icons font. Link.

    0 讨论(0)
  • 慢半拍i
    2020-11-28 18:21

    For angular material you should use fontSet input to change the font family:

    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...
    0 讨论(0)
  • 借酒劲吻你
    2020-11-28 18:23

    The Aj334's recent edit works perfectly.

    google CDN

    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

    Icon Element

    <i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
    0 讨论(0)
 看不清?
提交回复
热议问题