Materialdesign: Icon does not work - calendar-month (-outline)

[Subwaytime]

Hey there,
just trying to get a Calendar working while i checked on the Icons "mdi-calendar-month" and "mdi-calendar-month-outline". Both seem to not work, while every other Icon works!

Greetings,
Subway

[Templarian]

Can you verify that you have a version 3.6.95+. We're currently on 3.7.95.

https://dev.materialdesignicons.com/history This page shows when icons are added and when releases go out.

[Subwaytime]

My current Version is updated to latest. Updated after the Icons did not work because i thought it might be the Problem.

"@mdi/font": "^3.7.95"

[Templarian]

@Subwaytime Did you run npm install? Sorry, just checking everything.

https://cdn.materialdesignicons.com/3.7.95/ Visible here in Chrome.

Maybe it's a specific browser. Which are you viewing this with?

[Subwaytime]

Yes. I tried to reinstall the whole Project to see if there is an Issue with the node_modules. Unfortunately didnt change anything.

Using the newest Version of Firefox (67.0.4 - 64Bit - Windows 10)

[goyney]

I am unable to reproduce this issue locally with @mdi/font.

I'm also unable to reproduce it using the CDN. See this CodePen: https://codepen.io/anon/pen/BgxLRq

[Templarian]

I have no idea why it isn't working on your machine @Subwaytime. Do you have some addon installed that could be blocking some class names? Try in incognito.

The cdn/example above works in the browsers I've tried.

[Subwaytime]

Gonna try a stripped down Version without any CSS and go through each Library to see where the Problem might be.

[Subwaytime]

Guess i found the Issue, for somewhat Reason i needed to implement the Fonts from the "node_modules" into a different Folder thats located one Folder away from my "style.scss" because i am implementing MaterialDesignIcons like so:
@import "node_modules/@mdi/font/scss/materialdesignicons.scss";

Fonts are loaded ".../fonts" in the "node_modules/@mdi/font/scss/_variables.scss", which leads to the Problem as described, i needed to make a copy of the Fonts Folder.

My local Fonts Folder was not updated to the newest Version. Small Question i have now: Why is the "fonts" Folder loaded relatively instead of absolute ?

[goyney]

What benefit are you getting by trying to include the SCSS file? Just include the minified CSS file instead:

@import "node_modules/@mdi/font/css/materialdesignicons.css";

Much easier and avoids having to configured your SCSS processor in your bundler to handle import paths.

---

EDIT: Or better yet, don't use the webfont. Use the SVG or JS libraries instead. The webfont will continue to get larger and larger, which can be a performance hit. Using selective SVG's is preferred to keep only what you use in your web application.

[Templarian]

@goyney If you use the SCSS directly you get access to the SCSS variables. This can be useful in custom themes that don't want to load the _icons.scss.

@Subwaytime Just saw this you can set the folder to anything you want $mdi-font-path. 😃

For anyone using the SCSS we assume your setup might be more custom, so everything can be overridden. If you look at the files everything is $mdi-* with defaults.

[goyney]

Probably should add some of that info to the docs. 😄

[Subwaytime]

@Templarian Thank you! Gonna set the Path now to be Absolute :D

@goyney i am using SCSS anyways, so thats why i directly went for the SCSS and some Custom changes!
Gonna give SVG and JS a try if it fits my Project ^^

[goyney]

Excellent. Going to close this issue now. If you have any other issues, feel free to comment back or open a new issue.

[Subwaytime]

As a hint for anybody that needs an Absolute Path to the Fonts, worked like a Charm:

$mdi-font-path: "~node_modules/@mdi/font/fonts";`