Use Google Material UI in ASP Net CORE MVC project

Question

How do I add Google Material Icons into MVC Net Core Project? I followed these directions in my project folder by adding all the zip files. Just curious what is next step?

https://google.github.io/material-design-icons/

npm install material-design-icons

This link below is outdated.

How to use Material-UI in asp.net mvc project

Currently Using MVC Core Net Core 2.2.Company does not want to apply CDN URL route.

https://www.nuget.org/packages/MaterialDesign.Icons/ – Sam Axe Oct 18 '19 at 17:20 — Sam Axe, Oct 18 '19 at 17:20
Can you add some examples of using it? – mikolaj semeniuk Jun 19 '22 at 19:01 — mikolaj semeniuk, Jun 19 '22 at 19:01

score 3 · Accepted Answer · answered Jul 24 '19 at 08:25

If you used npm to install , it will created a folder called node_modules (possibly hidden in Solution Explorer, click Show All Files button to check it ).

You have to write some script (gulp, grunt, etc) to move the files from node_modulesdirectory to wwwroot/lib file :

How to use npm with ASP.NET Core

How to install font-awesome in Visual Studio 2017 using ASP.NET Core v2

If using gulp , you can try with :

gulp.task('copy', ["clean"], function () {
    return gulp.src(['./node_modules/material-design-icons/iconfont/*'], {
        base: 'node_modules'
    }).pipe(gulp.dest('./wwwroot/lib'));
});

And can reference the css file in _Layout.cshtml .

Note :Currently use Library Manager(LibMan) to restore material-design-icons always fail in my testing .

score 1 · Answer 2 · answered Oct 05 '20 at 23:35

I used this 3 simple steps and worked for me

go to this cdn and download all google font files in it
copy all css files that you download it in css folder
create a folder with fonts name in wwwroot , and copy other files (font files)that you download it

its ready do use just add css link to your project and enjoy

Use Google Material UI in ASP Net CORE MVC project

2 Answers2