Angular 4.4.4 project with sass styles : material design setup doesn't work

Issue

I've followed this guide(link in comments) to implement material components and icons in my angular 4 project.

I'm encountering and error when I try to import material design in my scss config file with these lines:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

IntelliJ alert me with :"Cannot find URL...etc"

Now I'm using a workaround importing directly in desider HTML file the icons from material with this link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

but like this all the step did in the tutorial are useless.

Can anyone say to me where i'm doing wrong?

EDIT 1 Removed ~ as requested:

I'm not very skilled in angular2 project structure ( my front-end co-worker got flu ).

I'm asking myself where to put these 2 lines , because i can't find in my project the global style.css

FINAL EDIT

Following the documentation tutorial from the beginning, worked for me.

I solved creating a custome theme, because material REQUIRE a theme to start the components.

For the icons-> just put the link import in index.html.

For Components-> follow the "get started" part of the documentation

Solution

Remove the leading ~ from the URL: it's a webpack shorthand for node_modules/.

This is why they use it in the following line for angular/material: it's rewritten to node_modules/@angular/material/prebuilt-themes/indigo-pink.css.

EDIT:

You can add that by following the tooltip (go into Settings > DTD and add it here as a URI):

Answered By - msanford