Spacing between button and title in toolbar

[calebegg]

There should be 24px of spacing between icon buttons, and 32px between an icon button and the title.

https://material.io/design/components/app-bars-top.html#specs

Right now, there's no default spacing.

[jelbourn]

My interpretation here is that this falls into the "application layout" side of things, which we generally try to stay away from except at a very high level (like sidenav). mat-toolbar specifically really just aims to be a theme-colored box that lets users project arbitrary content without having an opinion on placement. This philosophy comes from seeing a more opinionated approach in AngularJS Material (which added spacing all over the place) becoming unpredictable and, most of the time, not matching what most users want/expect.

Never set margin on a host element is a hard rule for the whole library.

[calebegg]

I guess as much as possible, I'd like the framework to take care of instances where I'd otherwise just have to look up the spec and blindly apply it (like I did here). I generally file bugs like this when I've come up with a global override that takes care of the issue and could thus be upstreamed and take care of the issue for more people.

To me, this seems similar to the spacing in a mat-list-item with an avatar, where it was so nice that I could just stick mat-avatar on my img and it's just magically right.

Maybe there could be a mat-toolbar-action class or selector for adding the appropriate spacing?

.mat-toolbar-action:not(:last-child) {
  margin-right: 24px;
}
.mat-toolbar-action + h1 {
  margin-left: 12px;
}

It's totally up to you though, of course. You've got way more knowledge of what has/hasn't worked in the past, and if you think this isn't worth pursuing I'm fine with that.

[jelbourn]

(revisiting older issues as part of a triaging fix-it)

Going to close this since we're not going to do much more with mat-toolbar going forward since the Material Design spec moved away from it. We might do something different for a separate "top app-bar", but TBD on that front.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}