Mat Icon Button With Text

Adjust these values accordingly top.

Mat icon button with text.

Button has dense style. 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. Import maticonmodule from angular material icon. By default material uses capitalized button text labels for languages that have capitalization.

That is the difference between icons that look in perfect alignment with text and icons that look slightly off. Text label of button. For more information see the mdc button docs. We have to import maticonmodule from angular material modules.

Specifies an button s icon. Ui component infrastructure and material design components for mobile and desktop angular web applications. When all is said and done there is a solid and simple recipe for getting icons exactly where you want to line up with text icon position. Icon buttons allow users to take actions and make choices with a single tap.

Install with bower install with npm view source on github doc humanizedoc directivebrackets doc restrict doc humanizedoc directivebrackets view demo view source on github. I created the additional style to avoid breaking angular material components that are using mat icon and expecting it to be of default size and default alignment. For buttons with both icons and text use the mdc button component. The approach above worked acceptably fine with different font sizes of the text around the icon the icon is always vertically centered if that s what you want.

Text buttons and contained buttons use text labels which describe the action that will occur if a user taps a button. Link to a url when clicked. Eventcallback mouseeventargs event occurs when. Force browser to redirect outside component router space.