marella / material-icons

Latest icon fonts and CSS for self-hosting material design icons.
https://marella.github.io/material-icons/demo/
Apache License 2.0
305 stars 36 forks source link

CSS usage doesn't work #29

Closed Waysti closed 2 years ago

Waysti commented 2 years ago

The usage via css is currently not working. The icons only will be displayed if I add the following (from iconfont folder) to my own css:

@font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; font-display: block; src: url("~material-icons/iconfont/material-icons.woff2") format("woff2"), url("~material-icons/iconfont/material-icons.woff") format("woff"); } .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-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "liga"; }

this I have to do for each style (outlined, etc.)

is this the wanted behaviour? then it should be mentioned in the docs.

marella commented 2 years ago

The files mentioned in the main readme should also be imported in addition to the files mentioned in the css readme:

import 'material-icons/iconfont/material-icons.css'; // Imports font files for all styles
import 'material-icons/css/material-icons.css'; // Allows usage of CSS classes

I will update the readme to better reflect this.

Waysti commented 2 years ago

thx for your reply. after adding all imports like in your post everything works as expected. from the current readme i couldn't read out that I have to import the material-icons.css from iconfont.

but the update of the readme would surely help there. thx.