Mat Icon Next To Text

Bug feature request or proposal.

Mat icon next to text. Mat icon is part of angular material module called maticonmodule we can use font ligature as an icon by putting the ligature text in mat icon component. Download on desktop to use them in your digital products for android ios and web. This doesn t mean icons need to be 16px if your content font size is also 16px. Icons material icons are delightful beautifully crafted symbols for common actions and items.

We have to import maticonmodule from angular material modules. Icons ought to be treated a lot like typography. A telephone icon next to a phone number. Import maticonmodule from angular material icon.

I class material icons vertical align middle chevron left i div class inline block padding bottom 3 previous div. What is the expected behavior. Mat icons used as a matprefix or matsuffix should vertically align with the input text placeholder. For example mat icon home mat icon displays home icon.

To add the icon to mat button text we need to add mat icon before the text of button as shown below h3 mat button with icon and text h3 button mat raised button color primary mat icon shopping cart mat icon add to cart button. Surprisingly it added padding to both the icon and the div. Icons are positioned too high. What is the current behavior.

I m using zurb foundation 5 5. That seems broken to me as the icon is outside of the div. Codepen and steps to reproduce the issue. I have tried various ways but the text and icon are never horizontally aligned.