Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.
The following classes can be applied to change the color palette:
md-primarymd-accentmd-warn
format_bold
format_italic
strikethrough_s
title
format_bold
format_italic
format_underline
title
format_bold
format_italic
format_underline
title
format_bold
format_italic
strikethrough_s
title
format_bold
format_italic
strikethrough_s
title
Works
With
Text
Too
<md-button-toggle>
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-primary">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_underline</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-accent">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_underline</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-warn">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-primary">
<md-button class="md-icon-button">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button" disabled>
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button" disabled>
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle>
<md-button class="md-toggle">Works</md-button>
<md-button class="md-toggle">With</md-button>
<md-button>Text</md-button>
<md-button>Too</md-button>
</md-button-toggle>
format_bold
format_italic
strikethrough_s
title
format_bold
format_italic
format_underline
title
format_bold
format_italic
format_underline
title
format_bold
format_italic
strikethrough_s
title
format_bold
format_italic
strikethrough_s
title
Works
With
Text
Too
<md-button-toggle md-single>
<md-button class="md-icon-button">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle md-single class="md-primary">
<md-button class="md-icon-button">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_underline</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle md-single class="md-accent">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_underline</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle md-single class="md-warn">
<md-button class="md-icon-button">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle md-single class="md-primary">
<md-button class="md-icon-button">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button" disabled>
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button" disabled>
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle md-single>
<md-button>Works</md-button>
<md-button>With</md-button>
<md-button>Text</md-button>
<md-button>Too</md-button>
</md-button-toggle>