Icon Buttons
Icon buttons are buttons with a circular format that use icons instead of text to represent actions on the screen.
Default
By default, the icon buttons available in this theme are the same height has standard buttons. Use any one icon from the Material Icons library, that is also part of this theme, to add an icon to the button element.
Use the
.btn-icon
class with a standard button, and use an icon as the button text.
Raised Button Variant
All of the button variants that are part of Material Admin Pro are supported as icon buttons as well. Below are examples of icon buttons using the raised button variant.
Outline Button Variant
The outline button variant also works with the icon button component.
Text Button Variant
The text button variant allows for buttons with transparent backgrounds to be utilized throughout the theme.
Sizing
All of the sizing options that are default with Bootstrap, along with the expanded extra small and extra large options, are also made available as icon buttons.
Styling Examples
Utility classes can be used to change the styling of icon buttons. In the example below, border utilities are used to change the styling of the icon button, changing it from a circle to a rounded square.
Related Links
Material Admin Pro's button component