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
1
vote
2 answers

V-Checkbox icon missing with vuetify & @mdi/js. Whats the best way to import it?

I want to know how to properly use vuetify components that itself use icons with @mdi/js. My vuetify config looks like this: vuetify: { iconfont: 'mdiSvg', defaultAssets: false, ... } Just importing the icons and overriding them in the…
moritz
  • 366
  • 3
  • 17
1
vote
0 answers

How To Get @mdi/fonts To Display icon

I installed @mdi/fonts for an angular project. Everything works fine when I run ng serve or ng build, I get to see the icons displayed. But the icons becomes boxes when I run ng build --prod. I don't know why this is happening. How can I solve this.…
marvin ralph
  • 1,100
  • 3
  • 23
  • 43
1
vote
1 answer

Material Design Icons (JS SVG) Vuetify.js - append-icon not displaying using mdiSvg

I can't get the append-icon to display on Android, when using PhoneGap to produce an APK from my dist.zip folder. At first, it wouldn't display icons at all then I switched over to mdiSvg as per the link…
Dupdroid
  • 125
  • 2
  • 14
1
vote
1 answer

Material Design and Ionicons in select option in React

How can I add icons in select dropdown? My code is: import React, { Component } from 'react'; import Icon from '@mdi/react' import { mdiFormatAlignLeft } from '@mdi/js'; import { mdiCheckboxMarked } from '@mdi/js'; import { IoMdRadioButtonOn } from…
maja
  • 175
  • 5
  • 17
1
vote
1 answer

Vuetify icon doesn't show. It displayed a empty box alternatively

I’ve been developing a SNS application like Twitter or Instagram on laravel framework. I added Vue.js and Vuetify to my project. When I use v-icon it’s not showing, but alternatively, it shows empty box as follows. In chrome: And in Firefox: What…
Shintaro Nomiya
  • 85
  • 1
  • 11
1
vote
1 answer

Vuetify Rating Component Half Stars with all mdi icons

I'm setting up a rating component and would like to be able to pass a mdi icon, example "star", and that icon will populate the empty/half/full icons props. Case 1: With the star mdi icons this works nicely, as seen in heart screenshot and codepan …
BenB
  • 2,747
  • 3
  • 29
  • 54
1
vote
0 answers

Unable to create material design (mdi) checkbox in VueJS

In my application I'm using material design icons. I load them like so: It works good in many parts of the application, but it does not work…
Jacobian
  • 10,122
  • 29
  • 128
  • 221
1
vote
1 answer

Angular Material Design icons for each letter in the alphabet

I can't find any angular material icons for each letter in the alphabet here and here specially for "R", "A" and "V". I want to have the following icons like below. A plain circle with a capital letter inside. I just crop this one. I am now…
Carlos Galo Campos
  • 638
  • 7
  • 22
0
votes
1 answer

Is a specific Vuetify icon font more performant than others?

Vuetify offers a few icon font options: https://vuetifyjs.com/en/features/icon-fonts/#usage Material Design Icons Material Design Icons - JS SVG Material Icons Is there any performance difference with these choices?
d-_-b
  • 21,536
  • 40
  • 150
  • 256
0
votes
0 answers

material_design_icons_flutter ^4.0.5955 doesn't show the icons

here is my code Align( alignment: Alignment.centerRight, child: Tab(icon: Icon(Icons.sms_outlined))), Tab(icon: Icon(MdiIcons.rocket)), but it shows nothing: instead, Icons…
achref
  • 23
  • 4
0
votes
1 answer

How host locally Material Design Iconic Font into a vue app

I have developed a Vue 2.6 SPA using Vuetify and Material Design Icons that is included as described here, but some elements of the SPA (partially derived by a public template) use also "Material Design Iconic Font". I would like to host locally the…
EanX
  • 475
  • 4
  • 21
0
votes
1 answer

mdicon components icon names doesn't work in vue

I want to use mdicon component (see here). But there's no cheatsheet for the icon names. I tried to use this cheatsheet but it's not working as well. The names don't work for icons with more than one word (e.g. arrow-left, flag-plus) but it does…
user15142225
0
votes
0 answers

How do you use a webfont npm package like @mdi/light-font in React Native (iOS/Android) with @oblador/react-native-vector-icons?

I would like to use the following icon webfont in React Native: @mdi/light-font I'm using @oblador/react-native-vector-icons to manage my web fonts. I don't use Expo. Currently I have used the .svg exports of @mdi/light-font and repackaged it as a…
Xiiryo
  • 3,021
  • 5
  • 31
  • 48
0
votes
3 answers

React Native Paper Icons repository

I have struggled a lot to figure out the repository being used in react native paper for Icons, using react native paper designing APP becomes very easy but figuring out Icon names was a bit struggle.
r7r
  • 1,440
  • 1
  • 11
  • 19
0
votes
1 answer

JavaFX - MaterialDesignIcons / GluonHQ Icon not showing

One of my coworkers created a mock-up of a JavaFX GUI using Netbeans. I am now in charge of turning it into a first prototype of the app. I imported the generated Java and FXML files in my Eclipse, but when I try to run it it fails to display the…
Gaëtan
  • 779
  • 1
  • 8
  • 26
1
2
3