Web Essentials element content HTML autocompletion

I'm trying to implement autocompletion for Google's Material Design icons in Web Essentials. This icon font uses the element content instead of the class attribute to define the icon like this: <i...

Shared element transition

I have an icon in a RecyclerView, in the left followed by some text. When you click on it a new activity starts corresponding to that item with the same icon in the center of the header bar and...

Material Design Icons not showing in browser

I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome or Safari. I'm using this CSS file: @font-face { font-family: 'Material...

Nativescript: mimic material design effect with floating action button

I'm using Nativescript 1.6 and this component https://github.com/bradmartin/nativescript-floatingactionbutton I would like to have some nice "material design effect" when you click on this button...

Vertical md-toolbar

Is a vertical toolbar a material-compliant element? Is it available in Angular Material? I'm looking for a way to line up several buttons with icons in a sidebar. I want something the size of a...

How to use material design iconic font as a marker for <li> element?

Is there possible way to use icons from http://zavoloklom.github.io/material-design-iconic-font/icons.html as a markers for elements?

vertical-align: middle not working on icon, span inside an anchor

I am working on a navigation bar for an app. Following google's material design reccomendations I have come up with specific measurements for my navigation buttons. Now I would like to vertically...

System config js Angular 2 problems with installing modules. Explanation

I have recently started to develop with Angular 2. There are a lot of tutorial out there. But one thing I cannot still understand is systemjs.config.js. I understand why is it used, and what is...

Toggle mdTooltip via event instead of hover

I'm usingmdTooltip on an icon - hovering over it displays the tooltip. How can show the tooltip without the user hovering (e.g. When an an event occurs) Looking at the documentation for MD...

Change SVG size in Angular Material 2 <mat-icon> using vanilla CSS or HTML

How do I change the size of an SVG icon on Angular 2+ Material Design using vanilla CSS, HTML, or JS? If I specify the icon inside the HTML element, styling works fine: <mat-icon style="font-size:...

How to create columns of icons and contact information in a Bootstrap list group?

I have a project which is similar to the snippet below, except that it includes Material Design icons as described in https://materialdesignicons.com/getting-started. <link rel="stylesheet"...

JSX Mapping a dynamic array of objects to display MDL menus

I am attempting to build a basic ReactJS app that will be utilizing Material Design Lite. Below is a code sample (using demo content from the Material docs) from within the React component...

Angular 6 Material Dialog Font Discrepancies and Material Icon Size Modification

I'm creating a sample app using material design as per what I've learned so far, but I noticed that the out of the box fonts for the material design are different for different components. For...

Resize svg icon using path element

I'm using a predesigned menu which has been used svg for drawing icons. For some reasons, I have to change icon size using path element. Now, I want to change icon and I have my own custom icons;...

Material Design Components Toggle effect not working

Im trying to use material components IconButton with React. Material Design : https://material-components.github.io/material-components-web-catalog/#/component/icon-button It work and show element...