Vue unable to load material icons

Question

The icons npm package "material-icons" version "^0.3.1" has been successfully installed.

"material-icons": "^0.3.1"

The icons have been imported as shown below.

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

Now, the classes are being used for the icons like this.

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

However, the icons are not appearing on the page. This issue is within a vue application created using vue cli 3.

Answer 1

Answer №1

In the case of using document, it is recommended to utilize a span with the icon's name as its content. Give it a try!

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

Answer 2

In the case of using document, it is recommended to utilize a span with the icon's name as its content. Give it a try!

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

Answer 3

It appears that there is a mistake in the import statement you've used...

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

In my case, specifying the path as

@import '../../node_modules/material-design-icons/iconfont/material-icons.css';

resolved the issue!

Answer 4

It appears that there is a mistake in the import statement you've used...

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

In my case, specifying the path as

@import '../../node_modules/material-design-icons/iconfont/material-icons.css';

resolved the issue!