Magento 2 – Review/Ratings Stars Icons Not Displaying Correctly on Frontpage

To override parent styles, you should create the following:

1. In your theme directory, create a web/css/source sub-directory.
2. Create a _theme.less file there.
3. Copy all variables you need from the parent <Magento_Luma_theme_dir>/web/css/source/_theme.less, including those which will not be changed.
4. Make the necessary changes.

More info under: Magento Developer Docs

Step 1.First of all Edit your custom listing layout file

Vender/Module/view/frontend/layout/custom_listing.xml

    <referenceContainer name="main">
        <block class="CutomBlockClass"  name="cutome.block.name" before="-" cacheable="false" template = "custom.phtml">
            <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers.custom" as="details.renderers">
                <block class="Magento\Framework\View\Element\Template" as="default"/>
            </block>
        </block>
    </referenceContainer> 
    <referenceBlock name="category.product.type.details.renderers.custom">
        <block class="Magento\Swatches\Block\Product\Renderer\Listing\Configurable" as="configurable" template="custom/category/product/cutomeSwetchFile.phtml" >
            <arguments>
                <argument name="type" xsi:type="string">category-custom</argument>
            </arguments>
        </block>
    </referenceBlock>

Note: block name of category.product.type.details.renderers.custom and <referenceBlock name="category.product.type.details.renderers.custom"> should be same.

Step: 2 add css file in your custom layout file:

<css src="Magento_Swatches::css/swatches.css"/>

Step:3 Vender/Module/view/frontend/templates/custom/category/product/cutomeSwetchFile.phtml

<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt-<?php echo $block->getType(); ?><?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
<script>
    require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer"], function ($) {
        $('.swatch-opt-<?php echo $block->getType(); ?><?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
            jsonConfig: <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
        });
    });
</script>