Stack Overflow
Stack Overflow

Questions tagged [material-design-icons]

Community driven version of Google's Material style icon set. For the official Google icons distribution please use [google-material-icons]. Use this tag for any issues importing or using the icons from materialdesignicons.com or any @mdi package on npm.

Material Design Icons

Material Design Icons is a project which aims to provide the largest set of icons which follow the material design specifications laid out by Google. The full list of available icons can be viewed at materialdesignicons.com.

Icons

Packages

  • @mdi/js - All icons as SVG path strings. Lightweight and easy to use.
  • @mdi/svg - All icons as SVG assets. Recommended for third party tools.
  • @mdi/font - Icon font. Recommended for use in design software.

License

Templates - WTFPL

Community Icons - SIL Open Font License 1.1

Google Material Design Icons - Apache License 2.0

34 questions
12
votes
1 answer

vuetifyjs: Adding only used icons to build

I'm currently build a vuetifyjs-app with the default "Material Design Icons". In the production build I only use 2 Icons of this font (used by vuetify-component chips). As recommend I included the complete iconfont with
mdunisch
  • 3,627
  • 5
  • 25
  • 41
11
votes
0 answers

Lighthouse: Ensure text remains visible during loading MaterialDesignIcons Webfonts

I want to improve Google Lighthouse score of a web application built using Vuetify. To increase the performance score, I have been trying to get rid of the diagnostics: Ensure text remains visible during webfont load Leverage the font-display CSS…
vahdet
  • 6,357
  • 9
  • 51
  • 106
5
votes
1 answer

How to use Material Design Icons in a web component?

Looks like that mdi is not working inside web components, or do I miss something? I want to develop a web component that encapsulates it's dependencies, adding the link to the parent document works, but it violates the original…
Jamesgt
  • 565
  • 5
  • 17
4
votes
1 answer

Vue: Using material-design-icons offline / size

I am using materialdesignicons in my vue project. require ('../node_modules/@mdi/font/css/materialdesignicons.min.css); Vue.use(Vuetify, {iconfont:'mdi'}); I have a handful of icons which I dynamically create: {{ some-mdi-file…
ekjcfn3902039
  • 1,673
  • 3
  • 29
  • 54
3
votes
1 answer

Material Design Icon Fonts are not working when publish exe file of MAUI project

I used Material Design Icon Fonts for icon image in my Maui project. When I publish my project as exe file and run, icon images are not appear. Please share me answer.
Cherry Tun
  • 31
  • 3
3
votes
1 answer

Vuetify icons not showing correctly: they appear as as "$vuetify.icons..."

I'm facing an issue with the icons in Vuetify not showing properly, for example below is the Vuetify expansion panel. I already tried the solutions in this question vuetify icon not showing, but they didn't work for me. You can see below that the…
Nic Scozzaro
  • 6,651
  • 3
  • 42
  • 46
2
votes
2 answers

Icon don't show up with vuetify/mdi

I want to use an Icon library and because it could be advantageous for other things, I decided to just use Vuetify, as it includes other design advantages than just the ability to include Icons. After installing @mdi/js and Vuetify with npm in my…
MySurmise
  • 146
  • 11
1
vote
1 answer

How to customize React Native Paper Switch components for android?

When I use this code from react native paper I expect the switch component to be exactly look likse the **Material design 3 **switch, but unfortunately it is not and looks like older version, I was curios how to customize this component to looks…
Reza dev
  • 25
  • 3
1
vote
1 answer

Issue with FontImageSource Glyph when using a Binding

Using Xamarin Forms 5 and Visual Studio 2022. I have added the materialdesignicons-webfont.ttf to a Fonts folder of the PCL project only and marked it as an Embedded Resource. I have added the following in the AssemblyInfo.cs file: [assembly:…
vbtrek
  • 21
  • 4
1
vote
1 answer

Vite + Vue3 in Electron: how to import and use Material Design Icons @mdi/font (or any other icon font)

I want to bundle @mdi/font icons into my application (it's an Electron app). I installed npm i @mdi/font --save-dev: "devDependencies": { "@mdi/font": "^7.0.96", } Then I imported css/scss, I tried several different ways: import in…
Shrike
  • 9,218
  • 7
  • 68
  • 105
1
vote
2 answers

Vue/Vuetify says Icon value is undefined or null

I load a list of items from the db which are to be displayed to the user in a list. Each item is of a particular type, and depending on the type, I wish to show an icon next to it. I've created a component to control the icon that will be shown. The…
Aditya
  • 3,080
  • 24
  • 47
1
vote
1 answer

Using Material Design icons with Vue

I want to use the MaterialDesignIcons (https://materialdesignicons.com/) with my vue project. What is the proper way of using these icons with my project? I tried the following but got errors.... yarn add @mdi/font then in my vue file