It appears that there's new CSS fonts on the Google Fonts API for the new Material Icon variants.
A Pen by Edric Chan on CodePen.
Last active
February 27, 2019 05:46
-
-
Save EdricChan03/2020cc4d3fe955ec8a59bc1c32dadb38 to your computer and use it in GitHub Desktop.
New Material Design Icons 🎉
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link 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" rel="stylesheet" /> | |
| <!-- ... --> | |
| </head> | |
| <body> | |
| <section id="original"> | |
| <h2>Original</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: Roboto, sans-serif; | |
| } | |
| // See Settings > CSS for more info on how I imported the CSS fonts | |
| .material-icons { | |
| font-family: 'Material Icons'; | |
| 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 { | |
| @extend .material-icons; | |
| font-family: 'Material Icons Outlined'; | |
| } | |
| .material-icons-two-tone, .material-icons.material-icons--two-tone { | |
| @extend .material-icons; | |
| font-family: 'Material Icons Two Tone'; | |
| } | |
| .material-icons-round, .material-icons.material-icons--round { | |
| @extend .material-icons; | |
| font-family: 'Material Icons Round'; | |
| } | |
| .material-icons-sharp, .material-icons.material-icons--sharp { | |
| @extend .material-icons; | |
| font-family: 'Material Icons Sharp'; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment