Icon Buttons

Icon buttons are buttons with a circular format that use icons instead of text to represent actions on the screen.


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.


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