星期日, 2019-12-22 09:18 — adminshiping1

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

Ask QuestionAsked 1 year, 7 months agoActive 1 month agoViewed 61k times117

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

Outlined, Rounded, Two-Tone and Sharp, in addition to the regular Filled/Baseline theme:

But, unfortunately, it doesn't say anywhere how to use the new themes.

I've been using it via Google Web Fonts by including the link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And then using the required icon as suggested in the documentation:

<i>account_balance</i>

But it always shows the 'Filled/Baseline' version.

I've tried doing the following to use the Outlined theme instead:

<i>account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

and, changing the Web Fonts link to:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

etc. But it doesn't work.

And there's no point in taking shots in the dark like that.

tl;dr: Has anyone tried using the new themes? Does it even work like the baseline version (inline html tag)? Or, is it only meant to be downloaded as SVG or PNG formats?

Thanks in advance.

icons material-design google-material-icons share improve this questionasked May 12 '18 at 6:20 Ashil John2,8294 gold badges12 silver badges26 bronze badgesadd a comment

12 Answers 正确答案有大用

active oldest votes 111

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>donut_small</i>
<i>donut_small</i>
<i>donut_small</i>
<i>donut_small</i>
<i>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>help_outline</i> 
<i>label_outline</i> 
<i>mail_outline</i> 
<i>info_outline</i> 
<i>lock_outline</i> 
<i>lightbulb_outline</i> 
<i>play_circle_outline</i> 
<i>error_outline</i> 
<i>add_circle_outline</i> 
<i>people_outline</i> 
<i>person_outline</i> 
<i>pause_circle_outline</i> 
<i>chat_bubble_outline</i> 
<i>remove_circle_outline</i> 
<i>check_box_outline_blank</i> 
<i>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 .

+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  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">

2) 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">

2) 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.

share improve this answer edited Apr 2 at 10:20 Edric11.6k7 gold badges44 silver badges58 bronze badgesanswered Jul 19 '18 at 6:04 Ashil John2,8294 gold badges12 silver badges26 bronze badges

hello! this is quite useful, but I still not able to include my icon, I want to include screen_share, I tried with the class .outline-screen_share but it does print anything, I chekc the class in the inspector and it exists, may I lost any step? – cucuru Nov 14 '18 at 12:08
1@cucuru Thanks, I think you missed Step 2. Adding the class .material-icons-new and its properties to your own stylesheet first and then calling the icon by . – Ashil John Nov 14 '18 at 15:10
1There now seems to be new CSS fonts for the new Material Icon themes: codepen.io/Chan4077/pen/bZNyQG – Edric Feb 27 at 10:04
Great! Works like a charm. – Soorya Aug 30 at 9:48
For Angular Material, you need to use fontSet instead of class. See Ron Netzer's answer below from 8/14/19. – Russ Sep 5 at 23:29

add a comment 24

As of 27 February 2019, there are CSS fonts for the new Material Icon themes.

However, you have to create CSS classes to use the fonts.

The font families are as follows:

Material Icons Outlined - Outlined icons
Material Icons Two Tone - Two-tone icons
Material Icons Round - Rounded icons
Material Icons Sharp - Sharp icons

See the code sample below for an example:

body {
 font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
 font-weight: normal;
 font-style: normal;
 font-size: 24px;
 line-height: 1;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 word-wrap: normal;
 direction: ltr;
 -webkit-font-feature-settings: 'liga';
 -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
 font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
 font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
 font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
 font-family: 'Material Icons Sharp';
}

<!DOCTYPE html>
<html>

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

<body>
 <section id="original">
 <h2>Baseline</h2>
 <i class="material-icons">home</i>
 <i class="material-icons">assignment</i>
 </section>
 <section id="outlined">
 <h2>Outlined</h2>
 <i class="material-icons-outlined">home</i>
 <i class="material-icons material-icons--outlined">assignment</i>
 </section>
 <section id="two-tone">
 <h2>Two tone</h2>
 <i class="material-icons-two-tone">home</i>
 <i class="material-icons material-icons--two-tone">assignment</i>
 </section>
 <section id="rounded">
 <h2>Rounded</h2>
 <i class="material-icons-round">home</i>
 <i class="material-icons material-icons--round">assignment</i>
 </section>
 <section id="sharp">
 <h2>Sharp</h2>
 <i class="material-icons-sharp">home</i>
 <i class="material-icons material-icons--sharp">assignment</i>
 </section>
</body>

</html>

Expand snippet

Or view it on Codepen

EDIT: As of 10 March 2019, it appears that there are now classes for the new font icons:

body {
 font-family: Roboto, sans-serif;
}

<!DOCTYPE html>
<html>

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

<body>
 <section id="original">
 <h2>Baseline</h2>
 <i class="material-icons">home</i>
 <i class="material-icons">assignment</i>
 </section>
 <section id="outlined">
 <h2>Outlined</h2>
 <i class="material-icons-outlined">home</i>
 <i class="material-icons-outlined">assignment</i>
 </section>
 <section id="two-tone">
 <h2>Two tone</h2>
 <i class="material-icons-two-tone">home</i>
 <i class="material-icons-two-tone">assignment</i>
 </section>
 <section id="rounded">
 <h2>Rounded</h2>
 <i class="material-icons-round">home</i>
 <i class="material-icons-round">assignment</i>
 </section>
 <section id="sharp">
 <h2>Sharp</h2>
 <i class="material-icons-sharp">home</i>
 <i class="material-icons-sharp">assignment</i>
 </section>
</body>

</html>

Expand snippet

EDIT #2: Here's a workaround to tint two-tone icons by using CSS image filters (code adapted from this comment):

body {
 font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
 filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
 font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
 color: #0099ff;
 font-size: 48px;
}

<!DOCTYPE html>
<html>

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

<body>
 <section id="original">
 <h2>Baseline</h2>
 <i class="material-icons">home</i>
 <i class="material-icons">assignment</i>
 </section>
 <section id="outlined">
 <h2>Outlined</h2>
 <i class="material-icons-outlined">home</i>
 <i class="material-icons-outlined">assignment</i>
 </section>
 <section id="two-tone">
 <h2>Two tone</h2>
 <i class="material-icons-two-tone">home</i>
 <i class="material-icons-two-tone">assignment</i>
 </section>
 <section id="rounded">
 <h2>Rounded</h2>
 <i class="material-icons-round">home</i>
 <i class="material-icons-round">assignment</i>
 </section>
 <section id="sharp">
 <h2>Sharp</h2>
 <i class="material-icons-sharp">home</i>
 <i class="material-icons-sharp">assignment</i>
 </section>
</body>

</html>

Expand snippet

Or view it on Codepen

share improve this answer edited Apr 23 at 5:00answered Feb 27 at 10:11 Edric11.6k7 gold badges44 silver badges58 bronze badges

3It appears that the color CSS attribute currently doesn't affect the colour of the new Material Icon themes. – Edric Feb 27 at 10:15
1The outlined icon is not working on ie ?, any thoughts ? – Jismon Thomas Mar 11 at 20:03
1it doesn't show up at all, even if you run this page on ie, you can see that it is just blank space, i ended up using baseline on ie! – Jismon Thomas Mar 12 at 14:57
It appears that the color property is supported on all icons except the two-tone icons. (Tested as of today) – Edric Mar 28 at 12:22

add a comment 10

What worked for me is using _outline not _outlined after the icon name.

<mat-icon>info</mat-icon>

<mat-icon>info_outline</mat-icon>

share improve this answeranswered Jul 27 '18 at 16:01 fxrxz1011 silver badge3 bronze badges

Ah-hah, so it works that way on Angular; that's pretty neat. – Ashil John Jul 29 '18 at 5:32
5there are some icons that are outlines and has the suffix _outline. It only works for those – Sangmin Lee Aug 16 '18 at 18:24
@SangminLee yes, this is the list of icons where it should work. material.io/tools/icons/?style=outline – fxrxz Aug 20 '18 at 14:26
@Aj334 yes it is neat, also can you accept this answer if it answered your question? – fxrxz Oct 15 '18 at 15:25
1I just used this with the plain Material web font in a React.js project. So it doesn't have anything to do with Angular. I think this is the solution. – Juuro Nov 12 '18 at 13:11

show 2 more comments 9

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>
...

share improve this answeranswered Aug 14 at 16:02 Ron1591 silver badge4 bronze badgesadd a comment 8

If you already have material-icons working in your web project, just need to update your reference in the html file and the used class for icons:

html reference:

Before

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

After

<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" />

material icons class:

After that just check wich className are you using:

Before:

<i className="material-icons">weekend</i>

After:

<i className="material-icons-outlined">weekend</i>

that works for me... Pura vida!

share improve this answeranswered Jul 3 at 22:25 rocaes90811 silver badge2 bronze badgesadd a comment 5

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

share improve this answer edited Jul 23 at 14:40 Ilon Mask1157 bronze badgesanswered May 16 '18 at 7:21 Martin4904 silver badges5 bronze badges

That project hasn't published a release in 2 years, I'm not holding my breath. – Coderer Jun 28 '18 at 8:08

add a comment 3

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>donut_small</i>
<i>donut_small</i>
<i>donut_small</i>
<i>donut_small</i>
<i>donut_small</i>

share improve this answeranswered Mar 31 at 19:43 lakshmeesha336 bronze badgesadd a comment 2

The webfonts link works now, in all browsers!

Simply add your themes to the font link separated by a pipe (|), like this

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

Then reference the class, like this:

// or

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

This pattern will also work with Angular Material:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

share improve this answer edited Mar 27 at 20:43answered Mar 27 at 15:16 intergalactic294 bronze badges

I will keep this simple approach until the attribute solution comes out. Good one @intergalactic – Sparker73 Aug 5 at 15:49

add a comment 1

None of the answers so far explains how to download the various variants of that font so that you can serve them from your own website (WWW server).

While this might seem like a minor issue from the technical perspective, it is a big issue from the legal perspective, at least if you intend to present your pages to any EU citizen (or even, if you do that by accident). This is even true for companies which reside in the US (or any country outside the EU).

If anybody is interested why this is, I'll update this answer and give some more details here, but at the moment, I don't want to waste too much space off-topic.

Having said this:

I've downloaded all versions (regular, outlined, rounded, sharp, two-tone) of that font following two very easy steps (it was @Aj334's answer to his own question which put me on the right track) (example: "outlined" variant):

Get the CSS from the Google CDN by directly letting your browser fetch the CSS URL, i.e. copy the following URL into your browser's location bar:

https://fonts.googleapis.com/css?family=Material+Icons+Outlined

This will return a page which looks like this (at least in Firefox 70.0.1 at the time of writing this):

/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

Find the line starting with src: in the above code, and let your browser fetch the URL contained in that line, i.e. copy the following URL into your browser's location bar:
```
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
```
Now the browser will download that .woff2 file and offer to save it locally (at least, Firefox did).

Two final remarks:

Of course, you can download the other variants of that font using the same method. In the first step, just replace the character sequence Outlined in the URL by the character sequences Round (yes, really, although here it's called "Rounded" in the left navigation menu), Sharp or Two+Tone, respectively. The result page will look nearly the same each time, but the URL in the src: line of course is different for each variant.

Finally, in step 1, you even can use that URL:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

This will return the CSS for all variants in one page, which then contains five src: lines, each one with another URL designating where the respective font is located.

share improve this answer edited Nov 9 at 11:25answered Nov 9 at 11:19 Binarus2,3881 gold badge11 silver badges31 bronze badgesadd a comment 0

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.

share improve this answeranswered Aug 15 '18 at 16:45 Lee Martin293 bronze badgesadd a comment 0

I was unsatisfied that until know Google hasn't yet released their new designs as font or svg icon set. Therefore I put together a small npm package to solve the problem.

https://www.npmjs.com/package/ts-material-icons-svg

Simply import the icons you wanna use and add them to your registry. This also supports tree shaking since only those icons are added to your project that you really want and/or need.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

to use two tone icons for example

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

In your html template you now can use the new icon

<mat-icon svgIcon="edit"></mat-icon>

share improve this answer edited Dec 10 '18 at 16:26answered Dec 10 '18 at 14:45 MarcusCalidus92 bronze badgesadd a comment 0

Somewhat hilariously, Google has made a font that works correctly in Safari but not in Chrome. Here's the https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

In reference to https://stackoverflow.com/a/54902967/4740291 and not being able to change the color using css.

share improve this answeranswered Mar 18 at 0:40 Kyle Snow Schwartz417 bronze badgesadd a comment

来自 https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and

How can I get Angular Material Icon to show the outline in my Angular app?

Ask Question

Asked 1 year, 7 months ago

Active 7 months ago

Viewed 10k times

I currently have

<mat-icon>info<mat-icon>

which gives the output of the info icon with the color filled. However, I just want the outline of the icon. How do I do that?

The icon I want is https://material.io/tools/icons/?icon=info&style=outline instead of https://material.io/tools/icons/?icon=info&style=baseline

edited May 15 '18 at 20:20

asked May 15 '18 at 20:11

zer0

2,1533 gold badges16 silver badges35 bronze badges

Possible duplicate of How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp? – Z. Bagley May 15 at 19:46

add a comment

3 Answers

正确答案

active oldest votes

Edit: 5/2019

This question is out of date. A more in depth, recent, answer can be found here: How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

The general idea is that some of the icons aren't imported by default, and need to be targeted from a different library.

Original answer:

You're looking for <mat-icon>info_outline</mat-icon>.

You can use this same template for any item that has an outline image, but don't attempt to use it for objects that are the same for filled/outlined.

e.g. <mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>

edited May 15 at 19:49

answered May 15 '18 at 22:41

Z. Bagley

6,2091 gold badge23 silver badges38 bronze badges

Thank you! I was trying to prefix 'outline' to the name. – zer0 May 15 '18 at 22:58
13
this is not working for me when the icon name has a complex name like – Daniel Eduardo Delgado Diaz Oct 17 '18 at 0:04
Also didn't work for me, specifically for edit_outline icon. Sherman's answer worked nicely though – Chris Newman May 15 at 17:05
I've voted to close this question since this is answered more in depth here: stackoverflow.com/questions/50303454/… – Z. Bagley May 15 at 19:47

add a comment

You may include this |Material+Icons+Outlinedin the url to display material icon in outline.

Example:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

Then in the template file, you can add in material-icons-outlined

<mat-icon class="material-icons-outlined">home</mat-icon>

answered Apr 27 at 15:41

Sherman Lye

1311 silver badge4 bronze badges

add a comment

I was unsatisfied that until know Google hasn't yet released their new designs as font or svg icon set. Therefore I put together a small npm package to solve the problem.

https://www.npmjs.com/package/ts-material-icons-svg

Simply import the icons you wanna use and add them to your registry. Short tutorial is in the Readme.

Cheers Marco

answered Dec 10 '18 at 13:43

MarcusCalidus

92 bronze badges

add a comment

来自 https://stackoverflow.com/questions/50358473/how-can-i-get-angular-material-icon-to-show-the-outline-in-my-angular-app

aaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbb

ow to use outlined material icon

Ask Question

Asked 1 year, 1 month ago

Active 11 months ago

Viewed 4k times

Scenario :

I'm using material icons, and I face a problem,
I usually use filled ones and everything is ok,
right now I want to use a outlined one, they have the same name, "screen_share"

Tried Case :
My try was include in index.html:

<link 
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" 
rel="stylesheet"/> 

<link type="text/css" 
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" 
rel="stylesheet">

and in myComponent.html

<button mat-button>
   <mat-icon>
      screen_share_outline
   </mat-icon>
</button>

but it still shows the filled one.

How can I do it?

this is not the same than the suggested duplicate, because the solution presented is the option I try and didn't work

angular-material material-design google-material-icons

shareimprove this question

edited Nov 14 '18 at 14:07

asked Nov 14 '18 at 10:41

cucuru

1,7282 gold badges20 silver badges38 bronze badges

Possible duplicate of How can I get Angular Material Icon to show the outline in my Angular app? – Abhishek Kumar Nov 14 '18 at 12:38
See if these links are helpful : stackoverflow.com/questions/50358473/… , github.com/angular/material2/issues/11544 , github.com/google/material-design-icons/issues/773 , github.com/vuetifyjs/vuetify/issues/4164, – Abhishek Kumar Nov 14 '18 at 12:43
If no luck, download svg for that outlined icon from material.io/tools/icons/?icon=print_disabled&style=outline, and use it in the markup. – Abhishek Kumar Nov 14 '18 at 12:50

add a comment

2 Answers 正确答案