The component picker does not always use the correct icons for components

[maltenuhn]

The component API can now specify a number of icons for a component. But it seems like at least in the Preferred component picker, these don't always show up:

(eg the typography ones should have Text icons but do not - but the Row and Column ones do have the correct icon).

[liady]

Also for the advanced picker:

[bkrmendy]

The problem is related to the specific component annotations in the project. The problematic preferred child components of Column are registered like so

{
    component: 'Title',
    moduleName: '/app/components/Components',
    variants: AntdTitleVariants,
  },
  {
    component: 'Paragraph',
    moduleName: '/app/components/Components',
    variants: AntdParagraphVariants,
  },
  {
    component: 'Text',
    moduleName: '/app/components/Components',
    variants: AntdTextVariants,
  },

The component picker uses the existing component registrations to look up the icons for the preferred children. However, we don't have corresponding component registrations for Title, Paragraph or Text, and since we can't find an icon for those, we fall back to the component icon.

Title, Paragraph and Text use the components from antd, which we wrapped into TypographyTitle, TypographyParagraph and TypographyText respectively, and we have component registrations for those components, so updating Title, Paragraph and Text to Title, Paragraph and Text use the components from antd, which we wrapped into TypographyTitle, TypographyParagraph and TypographyText in the preferred children section fixes the icons problem.

This project has the fix, the changes can be committed from here if we go with this http://localhost:8000/p/215f01ec-secret-triceratops/