material icons not importing in vue

Question

I have following icons npm package installed.

"material-icons": "^0.3.1"

I have imported them as following.

<style lang="sass">
$material-icons-font-path: '~material-icons/iconfont/';
@import '~material-icons/iconfont/material-icons.scss';
</style>

and I am using their classes as following.

<i class="rotate_right"></i>

But icons are not showing up. I have created vue application using vue cli 3.

score 0 · Accepted Answer · answered May 06 '19 at 01:42

0

As in document, you should use span with content is icon's name. Please try

<span class="material-icons">rotate_right</span>

answered May 06 '19 at 01:42

ittus

score -1 · Answer 2 · answered Aug 24 '23 at 05:37

There seems to be a typo in your import statement...

@import '~material-icons/iconfont/material-icons.scss'; whereas it should be @import '~material-icons/iconfont/material-icons.css';

For me, giving the path as @import '../../node_modules/material-design-icons/iconfont/material-icons.css'; worked !

2 Answers2