[Chip] Chip icon does not support icons with different width and height

Description: When using a drawable with width greater than height, vice-versa, the icon became stretched:

Even after use the attribute chipIconSize:

Expected behavior: Should show the image correctly:

Source code: The code snippet which is causing this issue. Please consider attaching a minimal sample app that reproduces the issue. <com.google.android.material.chip.Chip android:id="@+id/cat_chip_filter_chip" style="@style/Widget.MaterialComponents.Chip.Filter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:layout_marginBottom="8dp" android:layout_marginStart="16dp" android:layout_marginEnd="16dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" app:chipIcon="@drawable/ic_stars_4" app:chipIconVisible="true" android:layout_below="@id/cat_chip_entry_chip" android:layout_gravity="center_vertical|start" android:layout_toEndOf="@id/cat_chip_filter" android:layout_toRightOf="@id/cat_chip_filter" android:ellipsize="end" android:text="@string/cat_chip_text"/>

The drawable xml: <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="70dp" android:height="14dp" android:viewportWidth="70" android:viewportHeight="14"> <path android:pathData="M66.0332,13.6831C66.1734,13.6869 66.3085,13.6316 66.4032,13.5316C66.4979,13.4315 66.5429,13.2966 66.5266,13.1618L66.0079,8.8477L69.0493,5.6518C69.1669,5.528 69.2065,5.3525 69.1531,5.1925C69.0997,5.0325 68.9615,4.9126 68.7912,4.8786L64.386,4.0221L62.1847,0.2365C62.0989,0.0903 61.9385,0 61.7647,0C61.5909,0 61.4305,0.0903 61.3447,0.2365L59.1434,4.0221L54.7382,4.8786C54.5679,4.9126 54.4297,5.0325 54.3763,5.1925C54.3229,5.3525 54.3625,5.528 54.4801,5.6518L57.5215,8.8477L57.0028,13.1618C56.9833,13.3291 57.0583,13.4936 57.1992,13.5924C57.3401,13.6912 57.5251,13.709 57.6834,13.639L61.7647,11.8306L65.846,13.639C65.9047,13.6657 65.9684,13.6807 66.0332,13.6831Z" android:strokeWidth="1" android:fillColor="#FED200" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M47.9156,13.6831C48.0558,13.6869 48.1908,13.6316 48.2855,13.5316C48.3802,13.4315 48.4253,13.2966 48.409,13.1618L47.8903,8.8477L50.9316,5.6518C51.0492,5.528 51.0889,5.3525 51.0355,5.1925C50.9821,5.0325 50.8438,4.9126 50.6736,4.8786L46.2684,4.0221L44.0671,0.2365C43.9813,0.0903 43.8209,0 43.6471,0C43.4732,0 43.3128,0.0903 43.227,0.2365L41.0257,4.0221L36.6206,4.8786C36.4503,4.9126 36.3121,5.0325 36.2587,5.1925C36.2052,5.3525 36.2449,5.528 36.3625,5.6518L39.4038,8.8477L38.8851,13.1618C38.8656,13.3291 38.9407,13.4936 39.0816,13.5924C39.2225,13.6912 39.4075,13.709 39.5658,13.639L43.6471,11.8306L47.7283,13.639C47.7871,13.6657 47.8507,13.6807 47.9156,13.6831Z" android:strokeWidth="1" android:fillColor="#FED200" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M29.7979,13.6831C29.9382,13.6869 30.0732,13.6316 30.1679,13.5316C30.2626,13.4315 30.3077,13.2966 30.2913,13.1618L29.7726,8.8477L32.814,5.6518C32.9316,5.528 32.9712,5.3525 32.9178,5.1925C32.8644,5.0325 32.7262,4.9126 32.5559,4.8786L28.1508,4.0221L25.9494,0.2365C25.8636,0.0903 25.7032,0 25.5294,0C25.3556,0 25.1952,0.0903 25.1094,0.2365L22.9081,4.0221L18.5029,4.8786C18.3326,4.9126 18.1944,5.0325 18.141,5.1925C18.0876,5.3525 18.1273,5.528 18.2448,5.6518L21.2862,8.8477L20.7675,13.1618C20.748,13.3291 20.823,13.4936 20.9639,13.5924C21.1048,13.6912 21.2898,13.709 21.4481,13.639L25.5294,11.8306L29.6107,13.639C29.6694,13.6657 29.7331,13.6807 29.7979,13.6831Z" android:strokeWidth="1" android:fillColor="#FED200" android:fillType="evenOdd" android:strokeColor="#00000000"/> <path android:pathData="M11.6803,13.6831C11.8205,13.6869 11.9555,13.6316 12.0502,13.5316C12.145,13.4315 12.19,13.2966 12.1737,13.1618L11.655,8.8477L14.6964,5.6518C14.8139,5.528 14.8536,5.3525 14.8002,5.1925C14.7468,5.0325 14.6085,4.9126 14.4383,4.8786L10.0331,4.0221L7.8318,0.2365C7.746,0.0903 7.5856,0 7.4118,0C7.2379,0 7.0775,0.0903 6.9917,0.2365L4.7904,4.0221L0.3853,4.8786C0.215,4.9126 0.0768,5.0325 0.0234,5.1925C-0.03,5.3525 0.0096,5.528 0.1272,5.6518L3.1685,8.8477L2.6498,13.1618C2.6303,13.3291 2.7054,13.4936 2.8463,13.5924C2.9872,13.6912 3.1722,13.709 3.3305,13.639L7.4118,11.8306L11.493,13.639C11.5518,13.6657 11.6155,13.6807 11.6803,13.6831Z" android:strokeWidth="1" android:fillColor="#FED200" android:fillType="evenOdd" android:strokeColor="#00000000"/> </vector>

Android API version: 29

Material Library version: 1.2.0-alpha06 Device: Emulator, Pixel To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[vbuberen]

Can confirm the issue.

Here is my Chip:

<com.google.android.material.chip.Chip
               style="@style/Widget.MaterialComponents.Chip.Action"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/play_all"
               android:textColor="@color/white"
               app:chipIconSize="48dp"
               app:chipIcon="@drawable/ic_play"
               app:chipStrokeColor="@color/white"
               app:chipStrokeWidth="1dp"
               app:chipSurfaceColor="@color/black_transparent" />

And here is the result:

Note that chipMinHeight has no wrap_content property, so there is no way to set custom size for icons without manually setting height for the whole chip.

Works the same way on 1.1.0 and 1.2.0-alpha06

[wcshi]

Merged in https://github.com/material-components/material-components-android/pull/1242 Closing this bug.