Scenario :
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
Looks like the outlined fonts have not been finalized yet per issue #773
https://github.com/google/material-design-icons/issues/773
I see you are reviewing this issue
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
Until the outlined versions are completely included you will need to use the workaround provided in that stackoverflow question... I verified it in stackblitz and it does work.
Add following import to index.html
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Add the following to style.css
.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);
}
Use the following in your component html.
<i class="material-icons-new outline-screen_share"></i>