Open Alexandre-petitjean opened 10 months ago
3.0.6
https://github.com/creativetimofficial/material-dashboard/blob/master/assets/css/material-dashboard.css
IOS
laptop
Firefox 117.0.1
<i class="material-icons">face</i>
I build an offline website and I want to use the material icon set. I excepte the icons to appear.
The icons do not appear.
I see that the material-icons class is in the Material-dashboard.css file but the font family 'Material Icons Round' is not defined.
I added the definition of font-family to material-dashboard.css with the missing otf file. And I have added some rules for the icon size.
The file can be found in the github repo of google material icon : https://github.com/google/material-design-icons/blob/master/font/MaterialIconsRound-Regular.otf
@font-face { font-family: 'Material Icons Round'; font-style: normal; font-weight: 400; src: url(../fonts/MaterialIconsRound-Regular.otf); } <!-- The class was already present and was not modified --> .material-icons { font-family: 'Material Icons Round'; font-weight: normal; font-style: normal; font-size: 20px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } <!-- The rules I get on the material icon docs --> .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; }
Version
3.0.6
Reproduction link
https://github.com/creativetimofficial/material-dashboard/blob/master/assets/css/material-dashboard.css
Operating System
IOS
Device
laptop
Browser & Version
Firefox 117.0.1
Steps to reproduce
<i class="material-icons">face</i>
What is expected?
I build an offline website and I want to use the material icon set. I excepte the icons to appear.
What is actually happening?
The icons do not appear.
Solution
I see that the material-icons class is in the Material-dashboard.css file but the font family 'Material Icons Round' is not defined.
I added the definition of font-family to material-dashboard.css with the missing otf file. And I have added some rules for the icon size.
The file can be found in the github repo of google material icon : https://github.com/google/material-design-icons/blob/master/font/MaterialIconsRound-Regular.otf
Additional comments