Action button out of the box support for vue material design icons

[PVince81]

As I understood, we want to move to material design icons as per #1051

Currently when using icons from the vue material design icons library, the style doesn't fit:

This is an action button inside a menu (on my branch nextcloud/spreed#4569):

				<ActionButton
					v-shortkey="['h']"
					:close-after-click="true"
					@shortkey="toggleHandRaised"
					@click="toggleHandRaised">
					<Hand
						slot="icon"
						class="action-button__icon"
						:size="24"
						fill-color="#000000"
						decorative
						title="" />
					{{ raiseHandButtonLabel }}
				</ActionButton>

where Hand comes from import Hand from 'vue-material-design-icons/Hand'

With the above, the menu looks like this:

it is not centered, probably because of background-size not being usable with that svg element.

I tried bumping its size to 44px to match the other icon sizes but then the hand becomes huge:

In any case, as a consumer I shouldn't have to tinker with the styles.
Ideally we could define some styles that are based on the generated "material-design-icon" SVG.

[PVince81]

it appears that setting "vertical-align: middle" on the svg centers it correctly.

so we should add a rule for it.

[PVince81]

I guess even better would be to have a property :material-design-icon to provide a name and the required extra attributes are all taken care of.

[PVince81]

PR here for a quick fix: #1614

we need it because the ActionButton consumer cannot override the styles with ::v-deep since the popover itself might be in the document body

[juliusknorr]

I guess even better would be to have a property :material-design-icon to provide a name and the required extra attributes are all taken care of.

I talked about this with @ma12-co in the past and I cannot see a way we can make this happen without bundling all material design icons in the library. What we would need is a way to let the library keep those as as es6 imports so that they would be bundled by the app in the end somehow, but I could figure out any way to do so.

Though I'd say that is something for a separate issue if we really want to tackle it at some point.

[juliusknorr]

Fixed by #1614