Official Material Design style icons provided by Google. Use this tag for issues importing or using the icons provided at material.io. For the community driven icon set, please use the [material-design-icons] tag.
Questions tagged [google-material-icons]
223 questions
278
votes
16 answers
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
Google has revamped its Material Design Icons with 4 new preset themes:
Outlined, Rounded, Two-Tone and Sharp, in addition to the regular Filled/Baseline theme:
But, unfortunately, it doesn't say anywhere how to use the new themes.
I've been using…
Ashil John
- 7,362
- 4
- 19
- 34
56
votes
9 answers
Align material icon with text on Materialize
Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it
:
I tried everything, vertical…
MucaP
- 992
- 1
- 10
- 18
46
votes
15 answers
How to prevent material icon text from showing up when Google's JS fails to convert them?
How do you prevent material icon text from showing up when Google's JS fails to convert them to icons?
Icons are defined in markup as such:
Example: https://archive.fo/CKqKG/scr.png (see the top row of…
David
- 554
- 1
- 5
- 9
29
votes
7 answers
How to set the CSS content property with a Google Material Icon?
How can I insert the Google Material Icon "chevron icon right" (https://design.google.com/icons/#ic_chevron_right) in the following CSS content property:
.bullet li a:before {
content: "";
}
Max
- 4,965
- 17
- 49
- 64
26
votes
6 answers
How to use/enable animated icons?
Does anybody know how to use/enable the animated icons in an Angular Web Application which are shown in the material design documentation: https://material.io/design/iconography/animated-icons.html#usage
Leonzen
- 1,195
- 5
- 13
- 30
25
votes
8 answers
Material icon not rendering properly
Material icon not rendering properly in my project, i installed properly but even though not showing in browser.
i followed below steps:
npm install material-design-icons
.angular-cli.json
"styles": [
"styles.css",
…
dhana
- 857
- 3
- 11
- 26
14
votes
2 answers
How to use animated material icons in vuetify
By the v-icon component of Vuetify, using mainstream material design icons is quite straightforward like:
home
Now, I wonder if animated material icons are supported and can be used in Vuetify in a similar fashion -I mean without…
vahdet
- 6,357
- 9
- 51
- 106
12
votes
4 answers
how to use google material icons as class instead of tag
According to the guideline in the Google Material website we have to use material icons in _i _ tag.
the question is how to add the icons as font-awesome. something like :
Class="material-icons face"
instead of
face…
Fakhruddin Abdi
- 876
- 2
- 11
- 25
11
votes
4 answers
CSS - Center align text with icon
Using material icons with CSS, I have the following code that renders a link with icon and text.
group_workGroups
As you can see in the image below, the text seems to be sinking down.. I would like them…
Vijay Chavda
- 826
- 2
- 15
- 34
10
votes
2 answers
change Google Material Icon on hover with only html/css
I would like to change a Google Material Icon (the actual icon itself) on a button hover. I would like to do this with only HTML and CSS. I would like it to go from the 'plus' icon to something like a 'check' icon, specifically, using the 'done'…
scott.schaffer
- 645
- 7
- 22
8
votes
2 answers
Use material ui svg icons as background image
Can I use @material-ui/icons svg images as background of other elements.? Tried the below code but didn't work.
import CarIcon from '@material-ui/icons/DriveEtaRounded';
const carIcon = 
Johnson Cherian
- 545
- 1
- 7
- 21
8
votes
4 answers
Material Icons and Roboto not loaded in Safari - only Safari
as you can see in the screenshot the icons and the font are not loaded correctly.
Our observation is that this only does not work in Safari. No matter if we are testing on iPhone or on a Mac.
The fonts are loaded as follows:
Daniel
- 9,491
- 12
- 50
- 66
8
votes
1 answer
How to create stacked icons using angular material icons?
I have found "Material Design Iconic Font" library which is similar to md-icon and allow to create a stacked icon:
http://zavoloklom.github.io/material-design-iconic-font/examples.html
But wasn't able to create a stacked icon combining angular…
SatAj
- 1,899
- 4
- 29
- 47
7
votes
1 answer
Is there any way to display a close icon and tick icon together in material ui chip component
Material ui chip component documentation shows a close icon or done icon at a time. Is there any way to display both together
tech_enthusiasist
- 89
- 2
- 10
7
votes
2 answers
Add custom icons with Material Icons
I am using the official google material icons: https://material.io/icons/
I want add some icons created by me, in svg.
how can I do it?
RichardMiracles
- 2,032
- 12
- 28
- 46