How to pass content to custom icons and a balloon via Yandex.Maps ObjectManager?

Question

API

Icons must be completely custom and image is not suitable, because inside there should be style-driven content, namely: the number of objects with my font in the cluster, the price in the object. The object balloon has its own infa, in the cluster balloon you can do without much customization.
I did this: I assembled a cluster, made templates through the factory, and ok, there are clusters, their icons are needed, the cluster balloon opens. But the placemark icons are ordinary, no matter how I set them.
Altered it like this: removed the clusterer and installed the ObjectManager. Now everything is fine with clusters, the icons of ordinary objects are needed, but how to transfer content there? Balloon content?

ymaps.ready(function () {
  // Создаем собственный макет с информацией о выбранном геообъекте.
  var customClusterIconLayout = ymaps.templateLayoutFactory.createClass(
     '<div class="balloon__icon">$[properties.geoObjects.length]</div>'),
      clusterIcons = [
      {
         href: 'map_bubble.svg',
         size: [46, 55],
         // Отступ, чтобы центр картинки совпадал с центром кластера.
         offset: [-23, -55]
      }],
      customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        // Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
      );
  var customPlacemarkLayout = ymaps.templateLayoutFactory.createClass('<div class="placemark_layout_container">{{cost}}</div>');
  
  var mapCenter = [54.738363, 55.965014],
      map = new ymaps.Map('YMapsID', {
          center: mapCenter,
          zoom: 14,
          controls: []
      });
      objectManager = new ymaps.ObjectManager({
        // Чтобы метки начали кластеризоваться, выставляем опцию.
        clusterize: true,
        // ObjectManager принимает те же опции, что и кластеризатор.
      });
      
  objectManager.objects.options.set({
    // Опции.
    // Необходимо указать данный тип макета.
    iconLayout: customPlacemarkLayout,
    iconShape: {type: 'Circle', coordinates: [0, 0], radius: 20},
    //balloonContentHeader: 'Метка №' + i,
    //balloonContentBody: Objects[i].address,
  });
  objectManager.clusters.options.set({
    clusterDisableClickZoom: true,
    clusterOpenBalloonOnClick: true,
    groupByCoordinates: true,
    clusterIcons: clusterIcons,
    clusterIconContentLayout: customClusterIconLayout,
    // В данном примере балун никогда не будет открываться в режиме панели.
    clusterBalloonPanelMaxMapArea: 0,
    // Устанавливаем размер макета контента балуна (в пикселях).
    clusterBalloonContentLayoutWidth: 350,
    // Устанавливаем собственный макет.
    clusterBalloonItemContentLayout: customItemContentLayout,
    // Устанавливаем ширину левой колонки, в которой располагается список всех геообъектов кластера.
    clusterBalloonLeftColumnWidth: 120
  });
  map.geoObjects.add(objectManager);
  // Заполняем кластер геообъектами со случайными позициями.
  
  objectManager.add(data);
  
});

Answer 1

ymaps.ready(function () {
  var mapCenter = [54.738363, 55.965014],
      map = new ymaps.Map('map', {
          center: mapCenter,
          zoom: 12,
          controls: []
      }),
      placemarks = [];
  var customClusterIconLayout = ymaps.templateLayoutFactory.createClass(
     '<div class="balloon__icon">$[properties.geoObjects.length]</div>'),
      clusterIcons = [
      {
         href: 'map_bubble.svg',
         size: [46, 55],
         // Отступ, чтобы центр картинки совпадал с центром кластера.
         offset: [-23, -55]
      }],
      customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        // Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
      );
  var customPlacemarkLayout = ymaps.templateLayoutFactory.createClass(
        '<div class=placemark_layout_container>{{ properties.cost }}</div>'
      );
  // Создаем собственный макет с информацией о выбранном геообъекте.
  var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
          '<h2 class=ballon_header>{{ properties.rooms }}</h2>'
      ].join(''));
  
  
  var objectManager = new ymaps.ObjectManager({
      clusterize: true,
      clusterDisableClickZoom: true,
      clusterOpenBalloonOnClick: true,
      clusterBalloonPanelMaxMapArea: 0,
      clusterBalloonMaxHeight: 200,
  });
  objectManager.objects.options.set({
    iconLayout: customPlacemarkLayout,
    iconShape: {
      type: 'Rectangle', 
      coordinates: [
        [-70, -60], [70, 0]
      ]
    },
    balloonContentLayout: customBalloonContentLayout,
  });
  objectManager.clusters.options.set({
    clusterIcons: clusterIcons,
    clusterIconContentLayout: customClusterIconLayout,
  });
  // Заполняем кластер геообъектами со случайными позициями.
  for (var i = 0, l = data.features.length; i < l; i++) {
    var placemark = {
        type: 'Feature',
        id: i,
        geometry: {
          type: 'Point',
          coordinates: data.features[i].geometry.coordinates,
        },
        properties: {
          // Устаналиваем данные, которые будут отображаться в балуне.
          balloonContentHeader: 'Заголовок метки №' + (i + 1),
          balloonContentBody: 'Информация о метке №' + (i + 1),
          placemarkId: i,
          cost: data.features[i].properties.cost,
          rooms: data.features[i].properties.rooms,
        }
    };
    placemarks.push(placemark);
  }
  
  objectManager.add(placemarks);
  map.geoObjects.add(objectManager);
});