Main icon & title styling flawed and complicated.

[bwh-rl]

Description

As far as i understood the material design app bar, the title should always be in the same position (changes with screen size from 72dp to 80dp), and the main icon should also always be in the same position. https://material.google.com/layout/structure.html#structure-app-bar

The Styling right now has several problems:

• Only an paper-icon-button icon="menu" gets the correct margin-right.
• An back button will not get styled correctly.
• An button inside an <a> will not get styled correctly.
• An hidden button will move the title (Also occurs with e.g. paper-drawer-toggle).

The toolbar-tools > ::content > paper-icon-button + .title construct could maybe consider an hidden attribute but not an display: none;.

Imho an better and more simple solution could be (just a draft):

    <div id="topBar">
      <div style="fixWithForThemainIcon">
        <content select=".mainIcon"></content>
      </div>
      <content select=":not(.middle):not(.bottom)"></content>
    </div>

    <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]">
      <content select=".middle"></content>
    </div>

    <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]">
      <content select=".bottom"></content>
    </div>

If this would get accepted, i could start an PR.

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected