title: How do I make Angular Material's button toggle full width but left-align its contents?
body: <p>I have a Tree of Button Toggles in a Button Toggle Group:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-tree [dataSource]=&quot;dataSource&quot; [treeControl]=&quot;treeControl&quot; class=&quot;example-tree&quot;&gt;
      &lt;mat-button-toggle-group [ngModel]=&quot;selectedElement&quot; (ngModelChange)=&quot;select($event)&quot;&gt;
          &lt;!-- This is the tree node template for leaf nodes --&gt;
          &lt;mat-tree-node *matTreeNodeDef=&quot;let node&quot; matTreeNodeToggle&gt;
              &lt;li class=&quot;mat-tree-node&quot;&gt;
                  &lt;!-- use a disabled button to provide padding for tree leaf --&gt;
                  &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
                  &lt;mat-button-toggle class=&quot;selectable&quot; [value]=&quot;node.ref&quot;&gt;
                      &lt;mat-icon class=&quot;type-icon&quot;&gt;
                          {{getDisplayIcon(node.ref.type)}}
                      &lt;/mat-icon&gt;
                      {{node.name}}
                  &lt;/mat-button-toggle&gt;
              &lt;/li&gt;
          &lt;/mat-tree-node&gt;
          &lt;!-- This is the tree node template for expandable nodes --&gt;
          &lt;mat-nested-tree-node *matTreeNodeDef=&quot;let node; when: hasChild&quot;&gt;
              &lt;li&gt;
                  &lt;div class=&quot;mat-tree-node&quot;&gt;
                      &lt;button mat-icon-button matTreeNodeToggle [attr.aria-label]=&quot;'Toggle ' + node.name&quot;&gt;
                          &lt;mat-icon class=&quot;mat-icon-rtl-mirror&quot;&gt;
                              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                          &lt;/mat-icon&gt;
                      &lt;/button&gt;
                      &lt;mat-button-toggle class=&quot;selectable&quot; [value]=&quot;node.ref&quot;&gt;
                          &lt;mat-icon class=&quot;type-icon&quot;&gt;
                              {{getDisplayIcon(node.ref.type)}}
                          &lt;/mat-icon&gt;
                          {{node.name}}
                      &lt;/mat-button-toggle&gt;
                  &lt;/div&gt;
                  &lt;ul [class.example-tree-invisible]=&quot;!treeControl.isExpanded(node)&quot;&gt;
                      &lt;ng-container matTreeNodeOutlet&gt;&lt;/ng-container&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/mat-nested-tree-node&gt;
      &lt;/mat-button-toggle-group&gt;
  &lt;/mat-tree&gt;
  </code></pre>
  <p>It works, but each button toggle has a different width based on the size of its contents:</p>
  <p><a href="https://i.stack.imgur.com/Gp9wA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gp9wA.png" alt="enter image description here" /></a></p>
  <p>I can make each button full width by adding this to my <code>.scss</code> file:</p>
  <pre class="lang-css prettyprint-override"><code>.selectable {
      width: 100%;
  }
  </code></pre>
  <p>Which works, but all of them are centered rather than left-aligned (and the really long one goes beyond):</p>
  <p><a href="https://i.stack.imgur.com/rYiLT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rYiLT.png" alt="enter image description here" /></a></p>
  <p>I've narrowed the problem down to this <code>span</code> that is generated by <code>mat-button-toggle</code> and surrounds my contents and has <code>display: inline-block</code>:</p>
  <p><a href="https://i.stack.imgur.com/RcsEm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RcsEm.png" alt="enter image description here" /></a></p>
  <p>Adding <code>width: 100%</code> to this <code>span</code> lets me add a flex box to the contents and align them properly, but I can't change the span in Angular because it's not my component. I also can't style the <code>mat-button-toggle</code> to align content to the left, as the child <code>button</code> element is full width. How do I get it to do what I want?</p>