Mat Icon Button With Text

Text label of button.

Mat icon button with text.

Adjust these values accordingly top. Ui component infrastructure and material design components for mobile and desktop angular web applications. Text buttons and contained buttons use text labels which describe the action that will occur if a user taps a button. 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.

Button has dense style. For buttons with both icons and text use the mdc button component. For example mat icon home mat icon displays home icon. If a text label is not used an icon should be present to signify what the button does.

Eventcallback mouseeventargs event occurs when. 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. We have to import maticonmodule from angular material modules. 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.

Force browser to redirect outside component router space. Link to a url when clicked. That is the difference between icons that look in perfect alignment with text and icons that look slightly off. By default material uses capitalized button text labels for languages that have capitalization.

For more information see the mdc button docs. Specifies an button s icon. Icon buttons allow users to take actions and make choices with a single tap. Import maticonmodule from angular material icon.