Thanks to the advice from bruinspaw, I have some updated suggestions for anyone revisiting this thread after five years:
1. Installation
pnpm install materialize-css@next
pnpm install material-design-icons --save
(I personally prefer using pnpm over npm, but either option works fine)
(If you're interested in using material-design-icons-iconfont instead, see below)
2. Import Material Design icons and Materialize CSS
Add the following to your src/main.ts (or main.js if not using TypeScript):
import 'material-design-icons/iconfont/material-icons.css'
import 'materialize-css/dist/css/materialize.min.css'
import 'materialize-css/dist/js/materialize.min.js'
Note the additional import above, and further instructions are provided if using material-design-icons-iconfont.
3. Set up Components
Incorporate the following into your App.vue file (or relevant component):
<script setup lang="ts">
import { onMounted } from 'vue'
import M from 'materialize-css'
// ... other code
onMounted(() => {
M.AutoInit()
})
</script>
(Change "ts" to "js" if TypeScript is not being used).
One significant change from the original post is the use of the (Vue 3) Composition API (as indicated by 'setup') instead of the older Options API.
A key difference is that there is no need to include
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
in index.html as suggested in the initial solution (as noted by David North). Additionally, I recommend trying out
material-design-icons-iconfont instead of material-design-icons for a more streamlined version of the Material Design Icons. Make the following adjustments if you choose to go with this option:
- Install using
pnpm install material-design-icons-iconfont --save
instead of pnpm install material-design-icons --save
- Use
import 'material-design-icons-iconfont/dist/material-design-icons.css'
in place of import 'material-design-icons/iconfont/material-icons.css'
(This marks my debut post on Stack Overflow, so I hope I'm contributing constructively by updating an old discussion like this)