Text with Icon component

A mixin like this could be reused in a lot of the places I mentioned in my last comment:

Mixin is still too low level imo (it's an implementation details that gets "compiled" away). We should offer a simple class and component that the user can place anywhere. Nothing fancy, just this should be enough:
.iui-text-with-icon {
  display: flex;
  align-items: center;
  gap: $iui-s;

  &-icon {
    @include iui-icons-default;
    flex-shrink: 0;
  }

  &-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
We already have classes for iui-icons-default available to the user, which we might even want to expose as a component in react. As for sublabel support, that can come in the future as it's not relevant to this issue.

Originally posted by @mayank99 in https://github.com/iTwin/iTwinUI/issues/586#issuecomment-1098008414

i'm not sure about titleIcon because we don't even have title (it's called name).

i'm also not sure if we should add another prop for this. this is another opportunity to create a generic "text with icon" component that i proposed here: iTwin/iTwinUI#586 (comment)

_Originally posted by @mayank99 in https://github.com/iTwin/iTwinUI-react/pull/872#discussion_r1007101684_

Also follow latest conversation on iTwinUI CSS PR#586

iTwin / iTwinUI-react

Text with Icon component #910