Mat Icon Button With Text

For more information see the mdc button docs.

Mat icon button with text. 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. Ui component infrastructure and material design components for mobile and desktop angular web applications. If a text label is not used an icon should be present to signify what the button does. Icon buttons allow users to take actions and make choices with a single tap.

We have to import maticonmodule from angular material modules. By default material uses capitalized button text labels for languages that have capitalization. Adjust these values accordingly top. Button has dense style.

That is the difference between icons that look in perfect alignment with text and icons that look slightly off. 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. Link to a url when clicked. 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.

Text buttons and contained buttons use text labels which describe the action that will occur if a user taps a button. Install with bower install with npm view source on github doc humanizedoc directivebrackets doc restrict doc humanizedoc directivebrackets view demo view source on github. For buttons with both icons and text use the mdc button component. Specifies an button s icon.

Force browser to redirect outside component router space. Text label of button. For example mat icon home mat icon displays home icon. Eventcallback mouseeventargs event occurs when.